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,

...and this is my navbar in html

...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

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.