响应式CSS wave？

Question

我有下面的CSS，它是沿着英雄形象的底部创建“波”的效果。我试图让波浪变得更宽，但不是更高，但我很难让大小发挥作用。

理想情况下，我想要一个大约20px高的正弦波，横跨整个设备的宽度。

如果这是不可能的，调整波形到大约20px的高度和大约300px的宽度将是很好的。

感谢你在这方面的帮助！

​

​

.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

您可以添加一个带有wave的svg，并将其添加到hero部分

​

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>

​