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 のホバーとグラデーション プロパティを示しています ... これは 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 に答える