我正在尝试复制这种菜单的感觉,但在制作不同选项卡的梯形形状时遇到了一些麻烦。我浏览了源代码,还在开发工具中一一删除了每个 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)
我希望这有帮助。