如何使用 CSS 创建波浪形状？

使用 CSS 创建波浪形状

问题：

如何创建波浪形状喜欢这张使用 CSS 的图像吗？

[波浪形图像形状]

初始尝试：

此 CSS 创建一条直线：

#wave {
  position: absolute;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

答案：

为了实现波浪形状，我们可以利用 SVG 路径。通过将具有响应式属性的容器和具有弯曲路径的 SVG 相结合，我们可以创建所需的效果：

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z">

以上是如何使用 CSS 创建波浪形状？的详细内容。更多信息请关注PHP中文网其他相关文章！