制作梯形标签形状

Ced*_*Ced 2 css

我正在尝试复制这种菜单的感觉,但在制作不同选项卡的梯形形状时遇到了一些麻烦。我浏览了源代码,还在开发工具中一一删除了每个 css 属性,但我仍然没有弄清楚。我也尝试过

我做了一个JSFiddle试图复制它(目前没有梯形形状)。

<nav>
        <ul>
           <li class=" active"><a href="#">NEWS</a></li>
           <li><a href="#">FORUM</a></li>
           <li><a href="#"><span>TRUC</span></a></li>
           <li><a href="#"><span>OTHERS</span></a></li>
        </ul>
</nav>


nav{
    background:white;
    border-bottom: 2px solid #50bfff;
}
nav ul{
    margin:0;
}
nav ul li{
    display:inline-block;
}
nav a{
    padding: 1rem;
    color:#505050;
    display:block;
    text-decoration:none;
}
nav ul .active{
    background:#50bfff;
}
Run Code Online (Sandbox Code Playgroud)

小智 5

我在源中找到了梯形形状。这是一个透视变换,看看这个小提琴。

div{
    width: 50px;
    height: 50px;
    background: lightblue;
    border-radius: 5px;
    transform: perspective(5px) rotateX(2deg);
    transform-origin: bottom;
}
Run Code Online (Sandbox Code Playgroud)
<body>
    <div>
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

我希望这有帮助。