2

导航菜单

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

有没有办法使用任何CSS制作这样的形状？

4

3 回答 3

6

使用伪元素 :before 和 :after

小提琴

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

}
于 2013-08-06T10:01:31.340 回答
0

像使用 css

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

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

于 2013-08-06T09:25:34.053 回答
-1

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

小提琴

这演示了 CSS 中的 Hover 和渐变属性......这正在应用于 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 */
}

编辑：更新小提琴

适用于 IE9-10

于 2013-08-06T09:23:30.470 回答