波浪div与css或任何lib边界 [英] wavy divs border with css or any lib

问题描述

需要制作这样的波浪div边框：

Need to make wavy div borders like this:

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

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

那么如何使div具有弯曲边缘？

so how could make div with curved edge?

推荐答案

你需要一个svg路径来剪辑第一张图片 clip-path css / svg property。

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

• 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 上的示例

这篇关于波浪div与css或任何lib边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！