介绍
Section Waves 长这样
左边是没有 waves, 右边是加了 waves. 它的作用就是点缀. 让画面有一点 "Design" 的感觉.
参考
YouTube – CSS Wavy Background Tutorial | Section Dividers | FREE
原理
它并不是靠 CSS 做出来的. 它是 SVG. CSS 只需要做一些简单的定位, 控制 width 之类的而已.
有许多线上网站可以直接做出这类的 SVG.
softr – Create Beautiful SVG Shapes (可以做一些菱形变种)
Step by Step
进入 shapedivider.app 网站
点击 view code, 把 HTML 和 CSS 拷贝下来
放进 HTML 和 CSS 中就可以了.
HTML
放到 section 的结尾处
<body>
<header>
<div class="custom-shape-divider-bottom-1675137656">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</header>
<section>
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore et fugiat adipisci iusto earum deleniti animi dicta vitae ratione assumenda itaque, eaque rerum dolore fuga dolores, sequi quasi explicabo laborum magni! Enim laboriosam aperiam tempore consectetur officiis corporis est, veniam, alias quisquam facilis commodi soluta molestias voluptate, exercitationem architecto similique!</p>
</section>
</body>
View Code
CSS
body {
header {
background-image: url('../images/tifa1.jpg');
background-size: cover;
background-position: center;
height: 60vh;
position: relative;
.custom-shape-divider-bottom-1675137656 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1675137656 svg {
position: relative;
display: block;
width: calc(142% + 1.3px);
height: 50px;
}
.custom-shape-divider-bottom-1675137656 .shape-fill {
fill: #ffffff;
}
}
section {
padding-block: 3rem 5rem;
padding-inline: 1rem;
min-height: 50vh;
h1 {
font-size: 3rem;
color: red;
font-weight: 500;
}
p {
margin-top: 1rem;
font-size: 1.5rem;
line-height: 1.5;
}
position: relative;
z-index: 0;
}
}
View Code
搞定.
简单的 Section Design (without SVG)
如果不想搞 SVG 也可以高一些简单的 design. 用简单的 CSS 就可以了.
效果
标签：SVG,Section,Effect,height,shape,position,JS,CSS From： https://www.cnblogs.com/keatkeat/p/17078576.html