如何用随机锯齿获得撕纸效果？
How to get a torn paper effect with random saw teeth?
我正在尝试制作如下图所示的撕纸效果：
底部有撕裂效果。 I saw this并且能够做出如下图的撕纸效果
.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>
但问题是撕边看起来很像。我希望它们有不同的尺寸和不同的形状。
这可以使用 svg 来完成。我正在使用 Snap 和 jquery 来制作它，因为它让一切变得更容易。
以下片段创建随机撕纸效果。
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>
这是如何工作的？
首先创建一个数组来保存由 jquery 随机创建的坐标。 x 和 y 坐标是使用 Math.random() 创建的，并添加到 array.Before 添加到数组中，当前 x 坐标被添加到接收到的最后一个 x 坐标。这是为了让它连续。
改变 randX 变量中的 10 允许我们增加或减少一行的长度，改变 randY 变量中的 30 允许改变一行的高度。
这是一个使用低 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>
想要带边框的吗？
将polygon更改为polyline并添加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>
不喜欢随机撕裂效果？
我建议从随机效果中挑选一个不错的撕裂效果并复制它的 html 就像我在这里所做的那样
.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>
需要背景图片吗？
使用 snap 添加图像，将其 y 坐标设置为 -440（即，内容的高度。如果避免填充，则为 400）并使用多边形对其进行剪辑
$(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>
使用剪辑路径：
撕纸效果也可以使用clip-path产生它可以只用HTML和CSS来完成但是纯CSS版本不会产生随机我们可以使用 SNAP 或其他 SVG 库实现剪辑效果，但它确实会产生撕纸效果。
使用 CSS clip-path 的 缺点 是目前仅支持 Webkit 浏览器 . Firefox 仅支持 url() 语法，因此需要内联 SVG，而它在 IE 中完全不支持。 [Can I Use]
.torn-paper{
height: 300px;
width: 400px;
background: tomato;
-webkit-clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
}
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
由于 clip-path 基于百分比，默认情况下它是响应式的，当容器 div 也有背景图像时它可以工作。
.torn-paper{
height: 300px;
width: 400px;
background: url(http://lorempixel.com/400/300);
-webkit-clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
}
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
如果我们真的想要随机撕纸效果，那么我们可以使用 JS 设置 polygon 剪辑路径的坐标，然后将其添加为内联样式，如下面的代码片段所示。该代码段使用类似于您答案中的逻辑来填充数组。
var el = document.getElementsByClassName('torn-paper')[0];
var lastX = 0,
randX, randY, polygonPoints = ["0% 0%"];
randY = Math.floor(Math.random() * 20) + 80;
polygonPoints.push(lastX + '% ' + randY + '%');
while (lastX <= 100) {
randX = Math.floor(Math.random() * 5);
randY = Math.floor(Math.random() * 10) + 85;
polygonPoints.push(randX + lastX + '% ' + randY + '%');
lastX = lastX + randX;
}
polygonPoints.push("100% 0%");
el.style['-webkit-clip-path'] = 'polygon(' + polygonPoints.join() + ')';
el.style['clip-path'] = 'polygon(' + polygonPoints.join() + ')';
.torn-paper {
height: 300px;
width: 400px;
background: tomato;
}
0
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
我没有将以下内容作为我的主要答案，因为在 Akshay 的答案中已经以不同的方式涵盖了 SVG，但是对 clip-path 使用内联 SVG 也可以在 Firefox 中使用。 IE还是不支持。
var el = document.getElementsByClassName('torn-paper')[0];
var path = document.getElementById('clipper-path');
var lastX = 0,
randX, randY, polygonPoints = ["0 0"];
randY = (Math.floor(Math.random() * 20) + 80) / 100;
polygonPoints.push(lastX + ' ' + randY + '');
while (lastX <= 1) {
randX = Math.floor(Math.random() * 5) / 100;
randY = (Math.floor(Math.random() * 10) + 85) / 100;
polygonPoints.push(randX + lastX + ' ' + randY + '');
lastX = lastX + randX;
}
polygonPoints.push("1 0");
path.setAttribute('d', 'M' + polygonPoints.join() + 'z');
.torn-paper {
height: 300px;
width: 400px;
background: tomato;
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d='M0 0, 1 0, 1 1, 0 1z' id='clipper-path' />
</clipPath>
</defs>
</svg>
<div class="torn-paper">Lorem ipsum dolor sit amet</div>
使用Canvas:
我知道您没有标记 Canvas，但如果您也在 IE 中寻求支持，那么使用 Canvas 也是一个不错的选择。 Canvas 具有很好的浏览器支持（与 SVG 相同）。我将它包括在这里只是作为另一个可以使用的选项。
该方法与前面解释的非常相似，因为这里我们也创建了一个路径，然后根据该路径裁剪 canvas。
以下代码段已在 IE9+、Edge、Firefox、Chrome、Safari 和 Opera 中测试。
var canvas = document.getElementById('torn-canvas');
var ctx = canvas.getContext('2d');
var lastX = 0,
randX, randY;
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 0);
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
ctx.lineTo(0, randY);
while (lastX <= canvas.width) {
randX = (Math.floor(Math.random() * 7.5)) / 100 * canvas.width;
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
lastX = lastX + randX;
ctx.lineTo(lastX, randY);
}
ctx.lineTo(canvas.width, 0);
ctx.closePath();
ctx.clip();
ctx.beginPath();
ctx.fillStyle = 'tomato';
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.restore();
.container {
position: relative;
height: 300px;
width: 400px;
}
#torn-canvas {
position: absolute;
z-index: -1;
}
<div class='container'>
<canvas id='torn-canvas' height='300px' width='300px'></canvas>Lorem ipsum dolor sit amet...</div>
我们甚至可以添加图像作为背景，方法是先将图像绘制到 Canvas，然后将其剪裁成一定形状。
var canvas = document.getElementById('torn-canvas');
var ctx = canvas.getContext('2d');
var lastX = 0,
randX, randY, img = new Image();
ctx.save();
img.src = 'http://lorempixel.com/400/300/nature/4';
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
ctx.restore();
ctx.beginPath();
ctx.moveTo(0, 0);
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
ctx.lineTo(0, randY);
while (lastX <= canvas.width) {
randX = (Math.floor(Math.random() * 5)) / 100 * canvas.width;
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
lastX = lastX + randX;
ctx.lineTo(lastX, randY);
}
ctx.lineTo(canvas.width, 0);
ctx.closePath();
ctx.clip();
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.restore();
.container {
position: relative;
height: 300px;
width: 400px;
color: white;
}
#torn-canvas {
position: absolute;
z-index: -1;
}
<div class='container'>
<canvas id='torn-canvas' height='300px' width='300px'></canvas>Lorem ipsum dolor sit amet...</div>
我确信这个 post 可能已经死了，但我将此评论留在此处以防有人觉得它有帮助。我使用以下 CSS 创建了锯齿状效果：
clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
现在，我相信这可以进一步细化以提供更有说服力的外观，但我认为这是为图像区域提供粗略形状的好方法。
我正在尝试制作如下图所示的撕纸效果：
底部有撕裂效果。 I saw this并且能够做出如下图的撕纸效果
.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>
但问题是撕边看起来很像。我希望它们有不同的尺寸和不同的形状。
这可以使用 svg 来完成。我正在使用 Snap 和 jquery 来制作它，因为它让一切变得更容易。
以下片段创建随机撕纸效果。
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>
这是如何工作的？
首先创建一个数组来保存由 jquery 随机创建的坐标。 x 和 y 坐标是使用 Math.random() 创建的，并添加到 array.Before 添加到数组中，当前 x 坐标被添加到接收到的最后一个 x 坐标。这是为了让它连续。
改变 randX 变量中的 10 允许我们增加或减少一行的长度，改变 randY 变量中的 30 允许改变一行的高度。
这是一个使用低 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>
想要带边框的吗？
将polygon更改为polyline并添加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>
不喜欢随机撕裂效果？
我建议从随机效果中挑选一个不错的撕裂效果并复制它的 html 就像我在这里所做的那样
.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>
需要背景图片吗？
使用 snap 添加图像，将其 y 坐标设置为 -440（即，内容的高度。如果避免填充，则为 400）并使用多边形对其进行剪辑
$(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>
使用剪辑路径：
撕纸效果也可以使用clip-path产生它可以只用HTML和CSS来完成但是纯CSS版本不会产生随机我们可以使用 SNAP 或其他 SVG 库实现剪辑效果，但它确实会产生撕纸效果。
使用 CSS clip-path 的 缺点 是目前仅支持 Webkit 浏览器 . Firefox 仅支持 url() 语法，因此需要内联 SVG，而它在 IE 中完全不支持。 [Can I Use]
.torn-paper{
height: 300px;
width: 400px;
background: tomato;
-webkit-clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
}
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
由于 clip-path 基于百分比，默认情况下它是响应式的，当容器 div 也有背景图像时它可以工作。
.torn-paper{
height: 300px;
width: 400px;
background: url(http://lorempixel.com/400/300);
-webkit-clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
clip-path: polygon(0% 0%, 0% 97%, 2% 95%, 6% 99%, 12% 88%, 18% 92%, 27% 90%, 31% 97%, 39% 91%, 47% 95%, 60% 83%, 62% 81%, 69% 93%, 72% 96%, 79% 87%, 100% 99%, 100% 0%);
}
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
如果我们真的想要随机撕纸效果，那么我们可以使用 JS 设置 polygon 剪辑路径的坐标，然后将其添加为内联样式，如下面的代码片段所示。该代码段使用类似于您答案中的逻辑来填充数组。
var el = document.getElementsByClassName('torn-paper')[0];
var lastX = 0,
randX, randY, polygonPoints = ["0% 0%"];
randY = Math.floor(Math.random() * 20) + 80;
polygonPoints.push(lastX + '% ' + randY + '%');
while (lastX <= 100) {
randX = Math.floor(Math.random() * 5);
randY = Math.floor(Math.random() * 10) + 85;
polygonPoints.push(randX + lastX + '% ' + randY + '%');
lastX = lastX + randX;
}
polygonPoints.push("100% 0%");
el.style['-webkit-clip-path'] = 'polygon(' + polygonPoints.join() + ')';
el.style['clip-path'] = 'polygon(' + polygonPoints.join() + ')';
.torn-paper {
height: 300px;
width: 400px;
background: tomato;
}
0
<div class='torn-paper'>Lorem ipsum dolor sit amet</div>
我没有将以下内容作为我的主要答案，因为在 Akshay 的答案中已经以不同的方式涵盖了 SVG，但是对 clip-path 使用内联 SVG 也可以在 Firefox 中使用。 IE还是不支持。
var el = document.getElementsByClassName('torn-paper')[0];
var path = document.getElementById('clipper-path');
var lastX = 0,
randX, randY, polygonPoints = ["0 0"];
randY = (Math.floor(Math.random() * 20) + 80) / 100;
polygonPoints.push(lastX + ' ' + randY + '');
while (lastX <= 1) {
randX = Math.floor(Math.random() * 5) / 100;
randY = (Math.floor(Math.random() * 10) + 85) / 100;
polygonPoints.push(randX + lastX + ' ' + randY + '');
lastX = lastX + randX;
}
polygonPoints.push("1 0");
path.setAttribute('d', 'M' + polygonPoints.join() + 'z');
.torn-paper {
height: 300px;
width: 400px;
background: tomato;
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d='M0 0, 1 0, 1 1, 0 1z' id='clipper-path' />
</clipPath>
</defs>
</svg>
<div class="torn-paper">Lorem ipsum dolor sit amet</div>
使用Canvas:
我知道您没有标记 Canvas，但如果您也在 IE 中寻求支持，那么使用 Canvas 也是一个不错的选择。 Canvas 具有很好的浏览器支持（与 SVG 相同）。我将它包括在这里只是作为另一个可以使用的选项。
该方法与前面解释的非常相似，因为这里我们也创建了一个路径，然后根据该路径裁剪 canvas。
以下代码段已在 IE9+、Edge、Firefox、Chrome、Safari 和 Opera 中测试。
var canvas = document.getElementById('torn-canvas');
var ctx = canvas.getContext('2d');
var lastX = 0,
randX, randY;
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 0);
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
ctx.lineTo(0, randY);
while (lastX <= canvas.width) {
randX = (Math.floor(Math.random() * 7.5)) / 100 * canvas.width;
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
lastX = lastX + randX;
ctx.lineTo(lastX, randY);
}
ctx.lineTo(canvas.width, 0);
ctx.closePath();
ctx.clip();
ctx.beginPath();
ctx.fillStyle = 'tomato';
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();
ctx.restore();
.container {
position: relative;
height: 300px;
width: 400px;
}
#torn-canvas {
position: absolute;
z-index: -1;
}
<div class='container'>
<canvas id='torn-canvas' height='300px' width='300px'></canvas>Lorem ipsum dolor sit amet...</div>
我们甚至可以添加图像作为背景，方法是先将图像绘制到 Canvas，然后将其剪裁成一定形状。
var canvas = document.getElementById('torn-canvas');
var ctx = canvas.getContext('2d');
var lastX = 0,
randX, randY, img = new Image();
ctx.save();
img.src = 'http://lorempixel.com/400/300/nature/4';
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
ctx.restore();
ctx.beginPath();
ctx.moveTo(0, 0);
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
ctx.lineTo(0, randY);
while (lastX <= canvas.width) {
randX = (Math.floor(Math.random() * 5)) / 100 * canvas.width;
randY = (Math.floor(Math.random() * 10) + 85) / 100 * canvas.height;
lastX = lastX + randX;
ctx.lineTo(lastX, randY);
}
ctx.lineTo(canvas.width, 0);
ctx.closePath();
ctx.clip();
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.restore();
.container {
position: relative;
height: 300px;
width: 400px;
color: white;
}
#torn-canvas {
position: absolute;
z-index: -1;
}
<div class='container'>
<canvas id='torn-canvas' height='300px' width='300px'></canvas>Lorem ipsum dolor sit amet...</div>
我确信这个 post 可能已经死了，但我将此评论留在此处以防有人觉得它有帮助。我使用以下 CSS 创建了锯齿状效果：
clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
现在，我相信这可以进一步细化以提供更有说服力的外观，但我认为这是为图像区域提供粗略形状的好方法。