製作梯形標籤形狀

我試圖複製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

製作梯形標籤形狀

回答

相關問題