波浪div与css或任何lib边界

Question

需要像这样制作波浪div边框:

这里有两个带图像背景的div ..无处不在我找到制作svg的解决方案或做这样的事情:

.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>

但在两种解决方案中,如果使背景颜色透明,则无效.

那怎么能用弯曲的边缘制作div？

Answer 1

你需要一个svg路径来剪切第一个图像与clip-pathcss/svg属性.

• SVG/CSS解决方案:

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>

• 纯SVG解决方案(完全跨浏览器):

<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>

Codepen上的示例