Question

我试图复制this menu feel，但我在制作不同标签的梯形形状时遇到了一些麻烦。我浏览了源代码，并且在开发工具中我逐一删除了每个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;
}

Answer 1

我在Source中找到了梯形形状。这是一个透视转换，看看这个小提琴。

div{
    width: 50px;
    height: 50px;
    background: lightblue;
    border-radius: 5px;
    transform: perspective(5px) rotateX(2deg);
    transform-origin: bottom;
}

<body>
    <div>
    </div>
</body>

我希望这会有所帮助。

Answer 2

试试这个：

ul > li > a:hover{
    background:#50bfff;
    transition: all .2s ease;
    color: white;
}

ul > li > a{
    text-align:center;
    left: 0;
    bottom: 0;
    right: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100px;
    height: 120%;
    z-index: -1;
    transform: perspective(5px) rotateX(2deg);
    transform-origin: bottom;
}

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>
    <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>

Answer 3

以下是塑造元素的一些很好的指示：

https://css-tricks.com/examples/ShapesOfCSS/

你正在寻找的那个看起来像这样：

#trapezoid 
{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }

制作梯形标签形状

3 个答案: