title: how to use clip-path with text inside the div?
body: <p>i tried the following: </p>
  
  <p><a href="http://codepen.io/anon/pen/YXePBY" rel="noreferrer">http://codepen.io/anon/pen/YXePBY</a></p>
  
  <pre><code>&lt;div&gt;lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet&lt;/div&gt;
  
  div {
      width: 280px;
      height: 280px;
      background: #1e90ff;
      -webkit-clip-path: polygon(0 0, 78% 0, 93% 99%, 0% 100%);
    clip-path: polygon(0 0, 78% 0, 93% 99%, 0% 100%);
    padding: 15px
  }
  
  /* Center the demo */
  html, body { height: 100%; }
  body {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  </code></pre>
  
  <p>what I want is, that the text inside the div gets a line break when it reaches the border.
  how is this possible?</p>
  
  <p>and how can I get the highest browser compatibility? </p>
  
  <p>is there maybe a way to make this with SVGs?</p>