Responsive CSS wave?

Question

I have the following CSS which is creating a "wave" effect along the bottom of a hero image. I'm trying to make the waves much wider but not much taller, but I having difficulty getting the sizes to work.

Ideally I'd like a single sine wave about 20px high across the entire width of the device.

If that's not possible, adjusting the waveform to be about 20px high and around 300px wide would be great.

Thanks for any help with this!

.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);
}

related: stackoverflow.com/a/60174675/8620333 / stackoverflow.com/q/56199721/8620333 — Temani Afif
– Temani Afif, Commented Feb 7, 2021 at 19:51

joniEAHH · Accepted Answer · 2021-02-07 17:06:31Z

1

You can add a svg with a wave and add it on hero section

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>

edited Feb 7, 2021 at 17:06

answered Feb 7, 2021 at 17:00

joniEAHH

211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Malcolm Christie Over a year ago

Thanks, not quite the solution I had in mind but it definitely solves the problem!

Collectives™ on Stack Overflow

Responsive CSS wave?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related