突出顯示一個非長方形的部分內部div的懸停

Question

我有一個div（矩形），裏面我想要一個三角形的形狀。我想強調懸停。我怎麼做？

我在想有2個圖像具有相同的形狀和不同的不透明度，並在懸停時交換它們。會有另一種方式來做到這一點？你可以有一個非矩形的divs嗎？

Answer 1

你可以試試： http://jsfiddle.net/H42U7/

CSS代碼是：

.triangle-up { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid #959595;} 

.triangle-up:hover { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid #123456;} 

的HTML：

<div id="container"> 
<div class="triangle-up"> 
</div></div> 

要旋轉三角檢查這個網站： http://css-tricks.com/examples/ShapesOfCSS/

Answer 2

這取決於你需要走多遠在互聯網瀏覽器和你的三角形的背景下，你使用它，但假設你不關心Internet Explorer。

Chris Coyer在@CSS技巧有一個很好的教程已經安裝。
http://css-tricks.com/triangle-with-shadow/

如果你打算使用它，你可能想看看， http://fortawesome.github.io/Font-Awesome/圖標或按鈕。它完全免費且很容易實現。我已經在一些項目中使用過它，它是用於引導程序的。

希望這會有所幫助。