时间戳

首页 > 解决方案 > 具有各种向外和向内曲线的导航栏

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

问题描述

我正在尝试用曲线做一个导航栏，但我已经实现了几种方法。这是示例图片，在此处输入图像描述

...这是我在 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>

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

标签： htmlcss

解决方案

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

像这样的东西。 在此处输入图像描述

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

推荐阅读