Css：菜单悬停创建自定义形状背景图像？（使用css的平行四边形形状）

Question

我有导航html并且想要像这个附件一样悬停添加图像，如果菜单文本很长或很短，它应该正确设置。如果正常图像在那里它可以设置但形状不同所以如何设置此？

有没有办法用任何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

使用css，如

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

检查链接 http://jsfiddle.net/2G3zf/

Answer 3

详细说明slash197给出的评论是我之前为链接按钮创建的一个工作小提琴。

FIDDLE

这演示了CSS中的Hover和gradient属性......这适用于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上运行