首页 > web前端 > css教程 > 如何使用 CSS 创建波浪形状?

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

DDD
发布: 2024-12-18 01:51:09
原创
303 人浏览过

How Can I Create a Wavy Shape Using 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板