navbar with various outward and inward curves

i'm trying to do a navbar with curves but i have implemented several ways. This is the sample picture,enter image description here

...and this is my navbar in html

enter image description here

...I could not to do the curves

...this is my code

    <body>
        <div class='nav'></div>
        <div class="inverted-trapeze-back">
            <div class="trapeze-middle-back"></div>
            <div class="trapeze-down-back"></div>
        </div>
        <div class="inverted-trapeze">
            <div class="trapeze-middle"></div>
            <div class="trapeze-down"></div>
        </div>
        <style>
            body {
                margin: 0 !important;
            }

            .nav {
                width: 100%;
                height: 2.91rem;
                background-color: #101829;
                position: absolute;
                z-index: -10;
                margin-left: 20%;
            }

            .trapeze-middle {
                width: 53%;
                height: 0;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-top: 43px solid #fff;
                z-index: -10;
                position: absolute;
            }

            .trapeze-down {
                width: 53.5%;
                height: 11px;
                background-color: #fff;
                border-radius: 0 0 200px 200px;
                margin-left: 2.9rem;
                position: absolute;
                z-index: 14;
                margin-top: 33px;
            }

            .inverted-trapeze {
                margin-left: 15%;
                z-index: 14;
            }

            .trapeze-middle-back {
                width: 53%;
                height: 0;
                border-left: 53px solid transparent;
                border-right: 50px solid transparent;
                border-top: 44px solid #101829;
                z-index: -15;
                position: absolute;
            }

            .trapeze-down-back {
                width: 53.5%;
                height: 5px;
                background-color: #101829;
                border-radius: 0 0 200px 400px;
                margin-left: 53px;
                position: absolute;
                z-index: 12;
                margin-top: 42px;
            }

            .inverted-trapeze-back {
                margin-left: 14.8%;
                z-index: 12;
            }
        </style>
    </body>

i did it using position relative and position absolute with zindex, i did two inverted trapezoid, a white inverted trapezoid and another blue inverted trapezoid, it because the blue inverted trapezoid is behind the white inverted trapezoid to it looked like a blue line



Read more here: https://stackoverflow.com/questions/66268513/navbar-with-various-outward-and-inward-curves

Content Attribution

This content was originally published by Estivet Giraldo at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: