制作梯形标签形状

我试图复制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; 
}

来源

2015-10-18 Ced

我已经找到源代码中的梯形形状。这是一个角度转换，看看这个小提琴。

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

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

我希望这有助于。

来源

2015-10-18 18:08:42 tom

谢谢，烦人的一点是里面的文字也转换了。 – Ced

大量迟到，但我想我会加入这个完整性：你可以通过对它进行相反的转换来逐字地转换文本。唯一的错误是，它在Edge中看起来稍微有点。 – tom

试试这个：

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> 
 
\t <li><a href="#">FORUM</a></li> 
 
\t <li><a href="#"><span>TRUC</span></a></li> 
 
\t <li><a href="#"><span>OTHERS</span></a></li> 
 
    </ul> 
 
</nav>

来源

2015-10-18 18:01:25

这是不是真的与我的问题吗？ – Ced

是的，我刚刚添加了我的问题:) –

我首先理解你的问题，你试图存档这个悬停效果，但现在应该没问题。 –

下面是成形元件一些伟大的说明：

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

来源

2015-10-18 18:10:26 LeFex

制作梯形标签形状

回答

相关问题