How to get a torn paper effect with random saw teeth?

Question

I am trying to make a torn paper effect like the image below:

with the torn effect on the bottom side. I saw this and was able to make a torn paper effect as shown below

.box {    width: 300px;    height: 150px;    background: darkred;    position: relative;    display: inline-block;  }  .box:after {    position: absolute;    content: "";    width: 15px;    height: 15px;    transform: rotate(45deg);    transform-origin: 0% 100%;    background: darkred;    left: 0;    bottom: 0;    box-shadow: 15px -15px 0 0 darkred, 30px -30px 0 0 darkred, 45px -45px 0 0 darkred, 60px -60px 0 0 darkred, 75px -75px 0 0 darkred, 90px -90px 0 0 darkred, 105px -105px 0 0 darkred, 120px -120px 0 0 darkred, 135px -135px 0 0 darkred, 150px -150px 0 0 darkred, 165px -165px 0 0 darkred, 180px -180px 0 0 darkred, 195px -195px 0 0 darkred;  }

<div class="box"></div>

But the problem is that the torn edges look alike. I want them to be in different sizes with different shapes.

Answer 1

This can be done using svg. I am using Snap and jquery to make it as it makes everything a lot easier.

The following snippets create random torn paper effects.

Note:Support for snap - IE9 and up, Safari, Chrome, Firefox, and Opera see the specs

Support for svg caniuse

$(document).ready(function() {    var s = Snap('svg');    var width = $('.content').outerWidth();    $('.effect').width(width);    var lastX = 0;    var pointsArray = [0, 0];    while (lastX <= width) {      var randX = Math.floor(Math.random() * 25);      var randY = Math.floor(Math.random() * 30);      pointsArray.push(randX + lastX + ' ' + randY);      lastX = lastX + randX;    }    var torn = s.polygon(pointsArray + " " + width + " 0").attr({      fill: 'orange'    })  })

.content {    width: 400px;    height: 400px;    background: orange;    padding: 20px;  }  .effect {    height: 50px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  <div class="torn">    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>    <div class="effect">      <svg width="100%" height="100%"></svg>    </div>  </div>

How this works ?

First an array is created to hold the coordinates that are randomly created by jquery. x and y coordinates are created using Math.random() and are added to the array.Before adding to the array the current x coordinate is added to the last x coordinate received. This is to make it continuous.

Changing the 10 in the randX variable allows us to increase or decrease the length of one line and changing the 30 in the randY variable allows to change the height of one line.

Here is a snippet that uses low randX

$(document).ready(function() {    var s = Snap('svg');    var width = $('.content').outerWidth();    $('.effect').width(width);    var lastX = 0;    var lastY = 0;    var pointsArray = [0, 0];    while (lastX <= width) {      var randX = Math.floor(Math.random() * 2);      var randY = Math.floor(Math.random() * 30);      pointsArray.push(randX + lastX + ' ' + randY);      lastX = lastX + randX;    }    var torn = s.polygon(pointsArray + " " + width + " 0").attr({      fill: 'orange'    })  })

.content {    width: 400px;    height: 400px;    background: orange;    padding: 20px;  }  .effect {    height: 50px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  <div class="torn">    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>    <div class="effect">      <svg width="100%" height="100%"></svg>    </div>  </div>

Would like to have one with border?

Change polygon to polyline and add stroke

$(document).ready(function() {    var s = Snap('svg');    var width = $('.content').outerWidth();    $('.effect').width(width);    var lastX = 0;    var lastY = 0;    var pointsArray = [0, 0];    while (lastX <= width) {      var randX = Math.floor(Math.random() * 20);      var randY = Math.floor(Math.random() * 30);      pointsArray.push(randX + lastX + ' ' + randY);      lastX = lastX + randX;    }    var torn = s.polyline(pointsArray + " " + (width - 3) + " 0").attr({      fill: 'orange',      'stroke': 'black',      'stroke-width': 3    })  })

.torn {    margin: 50px;  }  .content {    width: 400px;    height: 400px;    background: orange;    padding: 20px;    border: 3px solid #000;    border-bottom: 0;  }  .effect {    height: 50px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  <div class="torn">    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>    <div class="effect">      <svg width="100%" height="100%"></svg>    </div>  </div>

Don't like random torn effects ?

i would suggest picking a nice torn effect from the random ones and copying its html like i have did here

.torn {    margin: 50px;  }  .content {    width: 400px;    height: 400px;    background: orange;    padding: 20px;  }  .effect {    height: 50px;  }

<div class="torn">    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>    <div class="effect" style="width: 440px;">      <svg width="100%" height="100%">        <desc>Created with Snap</desc>        <defs></defs>        <polygon points="0,0,10 25,20 15,27 21,43 24,51 14,70 9,84 25,88 18,96 11,100 20,113 6,117 5,123 1,136 25,151 29,157 4,166 29,181 2,197 28,212 8,226 8,232 12,240 8,254 16,270 5,279 26,291 5,304 0,307 5,325 26,329 18,347 3,360 5,372 26,382 9,393 21,406 27,411 8,415 4,429 8,441 19 437 0"        fill="#ffa500"></polygon>      </svg>    </div>  </div>

Need background images ?

Add an image using snap, set it's y coordinates to -440 (ie,height of the content.400 if padding is avoided) and clip it using the polygon

$(document).ready(function() {    var s = Snap('svg');    var width = $('.content').outerWidth();    $('.effect').width(width);    var lastX = 0;    var lastY = 0;    var pointsArray = [0, 0];    while (lastX <= width) {      var randX = Math.floor(Math.random() * 20);      var randY = Math.floor(Math.random() * 30);      pointsArray.push(randX + lastX + ' ' + randY);      lastX = lastX + randX;    }    var img = s.image('https://placeimg.com/440/500/any', 0, -440, 440, 500)    var torn = s.polygon(pointsArray + " " + (width - 3) + " 0").attr({      })    img.attr({      'clip-path': torn    })  })

.torn {    margin: 50px;  }  .content {    width: 400px;    height: 400px;    background: orange;    padding: 20px;    background: url('https://placeimg.com/440/500/any');  }  .effect {    height: 50px;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  <div class="torn">    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>    <div class="effect">      <svg width="100%" height="100%"></svg>    </div>  </div>