CSS或SVG中的波形

我试图用CSS创建软波，但遇到了一些问题。我现在正在使用边界半径来创建波浪，但它看起来更像云。我尝试使用

transform:translateZ（180度）

但是

div

的颜色是颠倒的

以下是我想要的：

以下是我所拥有的：

.wave1{
左：0%；
左边距：-50px；
}
.wave2{
左边距：-69px；
}
.wave3{
左边距：-69px；
}
.wave4{
左边距：-69px；
}
.波浪{
宽度：200%；
明确：无；
z指数：100；
位置：绝对位置；
利润上限：200px；
左边距：-150px；
}
.海浪分区{
浮动：左；
宽度：500px；
高度：100px；
边框：实心5px#000；
边框颜色：透明；
边界半径：70%/100px 100px 0；
背景色：#fff；
}
.下半部分{
宽度：100%；
身高：50%；
最高：70%；
位置：绝对位置；
背景色：#fff；
}
.背景波{
宽度：200%；
明确：无；
z指数：50；
位置：绝对位置；
利润上限：190px；
左边距：75px；
}
.bwave1{
左：0%；
左边距：-50px；
}
.bwave2{
左边距：-69px；
}
.bwave3{
左边距：-69px；
}
.bwave4{
左边距：-69px；
}
.背景波组{
浮动：左；
宽度：500px；
高度：100px；
边框：实心5px#000；
边框颜色：透明；
边界半径：70%/100px 100px 0；
背景色：#fff；
不透明度：0.5；
}

---

我建议使用内嵌的手工编码SVG。您的形状非常简单，使用SVG制作波浪非常简单。
所有你需要知道的关于这个问题。在下面的示例中，我使用了两个具有的路径元素来生成波浪：

svg{
背景：url（'https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg“）无重复中心；
背景尺寸：封面；
宽度：100%；
显示：块；
}

要使用CSS获得这些形状，您实际上是在突破CSS的界限。您可能想考虑改用SVG或CSS形状。在某种程度上，你可能只是让事情变得更难。你必须决定阈值在哪里。有什么帮助吗？@sheriffderek谢谢，我刚刚用photoshop制作了所需的波形，并将其导出为SVG，效果非常好。SVG有什么缺点吗？唯一的缺点是跨浏览器-但从今天起。。。这不应该是个问题。SVG太棒了。克里斯·科伊尔也有一本非常棒的书。