是否可以用波形结构屏蔽 div

Posted 2023-03-06

【中文标题】是否可以用波形结构屏蔽 div

【英文标题】：Is it possible to mask a div with wave structure

【发布时间】：2017-05-13 12:17:42

【问题描述】：

我有一个顶部带有波浪结构的设计，底部有三个静态图像。顶部图像是横幅图像，即动态，用户将上传图像，我们需要在具有波浪结构的 div 中显示该图像，如下所示。有什么方法可以使用 svg、canvas、html 和 css3 来实现它。

【问题讨论】：

this的可能重复

@Dana 这不是重复的。我希望图像适合该曲线 div。我不希望 div 使用绝对定位。

【参考方案1】：

 You can play with the values:
 HTML:
<div id="wave"></div>
CSS:
#wave 
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;

#wave:before 
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
 
 #wave:after 
  content: "";
 display: block;
 position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;

【讨论】：

我不想要这个。