Html 具有各种向外和向内曲线的导航栏_Html_Css

Html 具有各种向外和向内曲线的导航栏

html css

Html 具有各种向外和向内曲线的导航栏,html,css,Html,Css,我试图用曲线做导航栏，但我已经实现了几种方法。这是示例图片 …这是我的html导航栏 …我不能做曲线 …这是我的密码 <body> <div class='nav'></div> <div class="inverted-trapeze-back"> <div class="trapeze-middle-back"></di

我试图用曲线做导航栏，但我已经实现了几种方法。这是示例图片

…这是我的html导航栏

…我不能做曲线

…这是我的密码

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


身体{
边距：0！重要；
}
.导航{
宽度：100%；
身高：2.91雷姆；
背景色：#101829；
位置：绝对位置；
z指数：-10；
左缘：20%；
}
空中飞人中锋{
宽度：53%；
身高：0；
左边框：50px实心透明；
右边框：50px实心透明；
边框顶部：43px实心#fff；
z指数：-10；
位置：绝对位置；
}
.秋千{
宽度：53.5%；
高度：11px；
背景色：#fff；
边界半径：0 0 200px 200px；
左边距：2.9雷姆；
位置：绝对位置；
z指数：14；
边缘顶端：33像素；
}
.倒立吊架{
左边距：15%；
z指数：14；
}
.空中飞人中后卫{
宽度：53%；
身高：0；
左边框：53px实心透明；
右边框：50px实心透明；
边框顶部：44px实心#101829；
z指数：-15；
位置：绝对位置；
}
.秋千向后{
宽度：53.5%；
高度：5px；
背景色：#101829；
边界半径：0 0 200px 400px；
左边距：53px；
位置：绝对位置；
z指数：12；
边缘顶部：42px；
}
.倒立秋千{
左缘：14.8%；
z指数：12；
}

我用zindex做了相对位置和绝对位置，我做了两个倒立梯形，一个白色倒立梯形，另一个蓝色倒立梯形，这是因为蓝色的倒梯形在白色倒梯形的后面，看起来像一条蓝线

这个想法可能是使用伪元素，如：：after或：：before，并通过给边界半径：50%来创建圆。然后，您希望将它们放置在需要曲线的位置

像这样的。

顺便说一句，很久以前，在没有任何“边界”属性的地方，人们会在街区的角落放置圆形边界的图片。