的CSS：菜單懸停創建自定義形狀背景圖片（平行四邊形的形狀使用CSS）

Question

我有導航HTML和想在懸停添加圖像這樣的附件，應適當設置，如果菜單文本是長還是？ short.if正常圖像是在那裏它可以設置，但形狀是不同的，所以我如何設置？

有沒有什麼辦法可以使用任何css來製作這種形狀？

Answer 1

使用僞元素：before和：after

FIDDLE

.testClass:hover:before { 
    content: ''; 
    position: absolute; 
    top:0; 
    left:-15px; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 0 0 30px 15px; 
    border-color: transparent transparent beige transparent; 

} 
.testClass:hover:after { 
    content: ''; 
    position: absolute; 
    top:0; 
    right:-15px; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 30px 15px 0 0; 
    border-color: beige transparent transparent transparent; 

} 

Answer 2

詳細說明slash197在這裏給出的評論是我之前爲鏈接按鈕創建的工作小提琴。

FIDDLE

這證明了哈弗以及梯度財產CSS ......這是被應用到DIV

HTML

<div > 
<div class="testClass">HOME</div> 
<div class="testClass">ABOUT US</div> 
<div class="testClass">CONTACT</div> 
<div class="testClass">LOGIN</div> 
<div class="testClass">SERVICES</div> 

CSS

div { 
    float:left; 
    background-color:#fff;  

} 
.testClass { 
    margin-top: 0px; 
    margin-left: 0px; 
    width: 100px; 
    height: 63px; 
    zoom: 1; 
    display: block; 
    background-repeat: no-repeat; 
    background: #fff; 

} 
.testClass:hover { 
    background: #eaebea; 
    -webkit-transform: skew(-20deg); 
    /* Old browsers */ 
    background: -moz-linear-gradient(top, #eaebea 0%, #d6d7d5 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaebea), color-stop(100%, #d6d7d5)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #eaebea 0%, #d6d7d5 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #eaebea 0%, #d6d7d5 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #eaebea 0%, #d6d7d5 100%); 
    /* IE10+ */ 
    background: linear-gradient(to bottom, #eaebea 0%, #d6d7d5 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5', GradientType=0); 
    /* IE6-9 */ 
} 

編輯：Updated fiddle

將在IE9-10

Answer 3

使用CSS像

#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; } 

檢查鏈接工作 http://jsfiddle.net/2G3zf/