Question

我一直在努力在页面上两个部分之间的过渡处画一条波浪线。这两个部分具有各自的背景图像。我发现的示例中，至少有一部分具有简单的彩色背景。

问题是，当使用发现的某些方法（svg，剪切路径，变换）时，我必须始终填充颜色。

我想要的是：https://imgur.com/R1sXk8y

到目前为止，我所做的是：https://imgur.com/CtVLOE8（这是一个斜线示例。我必须在不同的边界上做各种形状，但是它是一个示例，用于显示波浪形边框会引起注意的分离也是

Answer 1

这是我的解决方案：尽管您可能知道，并非所有浏览器都支持clip-path，但我仍按预期使用了clip-path。

主要思想是拥有clipPathUnits="objectBoundingBox"。

MDN报价：

此值[clipPathUnits =“ objectBoundingBox”]表示元素内的所有坐标都相对于应用了剪切路径的元素的边界框。这意味着坐标系的原点是对象边界框的左上角，并且对象边界框的宽度和高度被认为具有1个单位值的长度。

*{margin:0;padding:0;}
#top {
  padding: 0;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/castell.jpg);
  background-size: cover;
  height: 50vh;
  -webkit-clip-path: url(#clip);
  clip-path: url(#clip);  
}

body{background:url(https://images.unsplash.com/photo-1470327500070-4857199b1bcd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);background-size:cover}

<svg height="0" width="0" class="svg-clip" style="position:absolute">
    <defs>
         <clipPath id="clip" clipPathUnits="objectBoundingBox">
           <path d="M0,0 L0,.5 Q.3,.2 .5,.5  T1,.5L1,0 0,0" />
        </clipPath>
    </defs>
</svg>
 
<div id="top"></div>

两段带有[背景]图片的波浪形边框分隔符

1 个答案: