响应式 CSS 浪潮？

Question

我有以下 CSS，它沿着英雄图像的底部创建“波浪”效果。 我正在尝试使波浪更宽但不会更高，但我很难让尺寸发挥作用。

理想情况下，我想要一个在整个设备宽度上大约 20 像素高的单个正弦波。

如果这不可行，将波形调整为大约 20 像素高和大约 300 像素宽会很好。

感谢您对此的任何帮助！

.wave{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}
.wave::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: repeat;
    height: 10px;
    background-size: 20px 10px;
    background-image: radial-gradient(circle at 10px -5px, transparent 12px,white 13px);
}
.wave::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 15px;
    background-size: 40px 40px;
    background-image: radial-gradient(circle at 10px 26px, white 20px, transparent 21px);
}

Answer 1

您可以添加带有波浪的 svg 并将其添加到英雄部分

body {
        margin: 0;
        padding: 0;
        font-family: "Raleway", sans-serif;
    }

    header {
        position: relative;
        height: 500px;
        background: #0b345d;
        background-image: linear-gradient(155deg, #002f62 0%, #18496a 50%, #138b89 100%);
    }

    header h1 {
        color: white;
    }

    svg {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: auto;
    }

    section {
        margin: 5% 10%;
    }

    h1 {
        margin: 0;
        text-align: center;
    }

<header>
        <h1>Header Content</h1>
        <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="-300 0 950 270">
            <path d="M-314,267 C105,364 400,100 812,279" fill="none" stroke="white" stroke-width="120"
                stroke-linecap="round" />
        </svg>
    </header>

    <section>
        <h1>Section Content</h1>
    </section>