如何用CSS的before和after伪元素实现波浪背景？

需求说明 #

我正在练习用HTML还原背景设计，需要实现两种波浪效果：

• Output 1：底部带有平滑波浪的渐变背景
• Output 2：双层风格的波浪背景

之前找到的方案依赖SVG，但我希望用纯CSS实现，目前无法通过::before/::after伪元素达成目标，请求帮助。

核心原理 #

::before和::after是CSS伪元素，必须设置content: ""才能生效，可通过position: absolute定位在父元素内，配合border-radius、background等属性创建自定义形状，无需额外HTML标签。

实现Output 1（单波浪效果） #

以下是调整后的完整代码，通过wrapper的::after伪元素创建底部平滑波浪：

*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    overflow-x: hidden;
}

.wrapper {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-image: linear-gradient(180deg, #A895E0 0%, #6D4CD8 35.86%, #6D4CD8 100%);
}

.pinkish {
    height: 768px;
    width: 100%;
    background: linear-gradient(104.42deg, #F7F6FD 0.08%, #FA7086 89.17%);
    background-blend-mode: overlay;
    filter: blur(75px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

/* Output 1 底部波浪 */
.wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120%;
    height: 120px;
    background: #ffffff; /* 替换为波浪下方的背景色 */
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    transform: translateX(-10%);
    z-index: 1;
}

<body>
    <section class="wrapper">
        <div class="pinkish"></div>
    </section>
</body>

关键调整说明：

1. 给pinkish添加position: absolute和z-index:0，让模糊层不遮挡波浪
2. ::after伪元素设置宽度为120%，配合transform: translateX(-10%)保证波浪铺满屏幕边缘
3. 通过border-radius的百分比设置，让元素顶部形成平滑的波浪弧度，调整数值可改变波浪弯曲程度

实现Output 2（双层波浪效果） #

如果需要更有层次的波浪，可同时使用::before和::after创建两层不同样式的波浪，替换上述CSS中的伪元素部分即可：

/* Output 2 双层波浪 */
.wrapper::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120%;
    height: 80px;
    background: #e0d8f5; /* 下层波浪颜色 */
    border-radius: 50% 50% 0 0 / 40% 40% 0 0;
    transform: translateX(-10%);
    z-index: 1;
}

.wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120%;
    height: 50px;
    background: #ffffff; /* 上层波浪颜色 */
    border-radius: 50% 50% 0 0 / 60% 60% 0 0;
    transform: translateX(-10%);
    z-index: 2;
}

关键调整说明：

1. 两个伪元素设置不同的高度和border-radius数值，形成前后层叠的波浪效果
2. 通过z-index控制层级，让上层波浪覆盖在下层之上
3. 调整height和border-radius的百分比，可自定义波浪的高度和弯曲度

内容的提问来源于stack exchange，提问作者Seven