如何在不使用图像的情况下在 div 上实现参差不齐的边缘效果？
How can I achieve ragged edge effect on div without using images?
我正在尝试解决在 div 上创建参差不齐的边缘效果的问题。那个 div 的底边应该看起来像这个 ragged div border
我正在考虑使用 svg 图像创建多个剪辑路径，但我担心响应问题。如果有更好的方法来实现这种效果，我也不想为此目的使用现成的图像。有人可以帮助我吗？
使用掩码：
.box {
height: 100px;
background: red;
-webkit-mask:radial-gradient(circle 15px at bottom,#0000 98%,#000) 0/40px 100% round;
}
<div class="box"></div>
我正在尝试解决在 div 上创建参差不齐的边缘效果的问题。那个 div 的底边应该看起来像这个 ragged div border
我正在考虑使用 svg 图像创建多个剪辑路径，但我担心响应问题。如果有更好的方法来实现这种效果，我也不想为此目的使用现成的图像。有人可以帮助我吗？
使用掩码：
.box {
height: 100px;
background: red;
-webkit-mask:radial-gradient(circle 15px at bottom,#0000 98%,#000) 0/40px 100% round;
}
<div class="box"></div>