title: Ripped Paper CSS Effect using Polygon
body: <p>I am trying to generate a box with ripped paper effect.So far I have tried and have found only this link to code pen which achieves partially what I am trying to do: <a href="https://codepen.io/dsm-webdsigner/pen/dYBRYw" rel="nofollow noreferrer">https://codepen.io/dsm-webdsigner/pen/dYBRYw</a></p>
  
  <p>What is missing is I need to achieve that paper effect on the all 4 sides of the paper. As far as I understand, it is achieved using clip-path proper and polygon() function of CSS.</p>
  
  <pre><code>-webkit-clip-path: polygon(0% 0%, 5%  100%, 10% 0%, 15%  100%, 20% 0%, 25% 100%, 30% 0%, 35%  100%, 40% 0%, 45%  100%, 50% 0%, 55%  100%, 60% 0%, 65%  100%, 70% 0%, 75%  100%, 80% 0%, 85%  100%, 90% 0%, 95%  100%, 100% 0%,0% 0%, 5%  100%, 10% 0%, 15%  100%, 20% 0%, 25% 100%, 30% 0%, 35%  100%, 40% 0%, 45%  100%, 50% 0%, 55%  100%, 60% 0%, 65%  100%, 70% 0%, 75%  100%, 80% 0%, 85%  100%, 90% 0%, 95%  100%, 100% 0%,0% 0%, 5%  100%, 10% 0%, 15%  100%, 20% 0%, 25% 100%, 30% 0%, 35%  100%, 40% 0%, 45%  100%, 50% 0%, 55%  100%, 60% 0%, 65%  100%, 70% 0%, 75%  100%, 80% 0%, 85%  100%, 90% 0%, 95%  100%, 100% 0%);
  </code></pre>
  
  <p>Can anyone help me figure out how to achieve those effect on all 4 sides? Thanks in advance.</p>