wavy divs border with css or any lib

Question

Need to make wavy div borders like this:

here is two divs with image backgrounds.. everywhere I find solution to make svg or do something like this:

.wave {
  height: 50px;
  position: relative;
}

.wave::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, aquamarine 13px);
}

.wave::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px);
}

<div class="wave"></div>

but in both solution if make background color transparent it has no effect..

so how could make div with curved edge?

Answer 1

You need a svg path to clip the first image with clip-path css/svg property.

• SVG/CSS solution:

img{
  float:left;
  clear:both;
  width:260px;
  height:260px;
}

.clipped{
  z-index:10;
  position:relative;
  margin-bottom:-20px;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);
}

<img class="clipped" src="http://www.freeimageslive.com/galleries/space/moon/pics/a11_h_40_5878.gif" alt="" />
<img src="http://www.freeimageslive.com/galleries/space/moon/pics/a12_h_55_8221.gif" alt="" />

<svg>
  <defs>
    <clipPath id="clip">
      <path d="M0,0 0,250 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0
               v-250 z"/>
    </clipPath>
  </defs>
</svg>

• Pure SVG solution (full cross-browser):

<svg width="400" height="600">
  <defs>
    <clipPath id="clip">
      <path fill="#ffffff" d="M0,0 0,250 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0 
               q 15, -20 30,0 q 15, 20 30,0
               v-250 z"/>
    </clipPath>
  </defs>
  
  <image width="260" height="260" x="0" y="240" xlink:href="http://www.freeimageslive.com/galleries/space/moon/pics/a12_h_55_8221.gif" />
  
  <image width="260" height="260" x="0" y="0" clip-path="url(#clip)" xlink:href="http://www.freeimageslive.com/galleries/space/moon/pics/a11_h_40_5878.gif" />
</svg>

Example on Codepen