I'm trying to cope with issue of creating ragged edge effect on div. The bottom edge of that div should look like this one ragged div border

I was considering creating multiple clip-paths with svg image, however I'm afraid about responsivity issues. Also I wouldn't like to use ready-made image for this purpose if there's better way to achieve this effect. Can somebody help me?

CodePudding user response：

use mask:

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

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