如何在不使用图像的情况下在 div 上实现参差不齐的边缘效果？

Question

我正在尝试解决在 div 上创建参差不齐的边缘效果的问题。该 div 的底部边缘应该看起来像这样 ragged div border

我正在考虑使用 svg 图像创建多个剪辑路径，但我担心响应性问题。如果有更好的方法来实现这种效果，我也不想为此目的使用现成的图像。有人可以帮帮我吗？

Answer 1

使用掩码：

.box {
  height: 100px;
  background: red;
  -webkit-mask:radial-gradient(circle 15px at bottom,#0000 98%,#000) 0/40px 100% round;
}

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