8

このナビゲーションメニューを作成しようとしています（緑色のハイライトはアクティブなページ、灰色はホバー状態です）：

ナビゲーションメニュー

次のCSSで平行四辺形を作成できます。

ul#nav li a {
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
    transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -webkit-transform: skew(-10deg);
    color:#757575;
}

ul#nav li a:hover {
    background:#f3f1eb;
}

ul#nav li a.current-menu-item {
    color:#fff;
    background:#5d9732;
}

ul#nav li a.current-menu-item:hover {
    background:#5d9732;
}

残念ながら、これによりテキストも歪んでしまい、斜体で表示されます。

ナビゲーションメニューのゆがみ

これがセットアップを示すjsfiddleです（ただし、jsfiddleではスキューは機能しません）：http：//jsfiddle.net/K3bQJ/4/

テキストのゆがみを防ぎ、斜体で表示されないようにする方法はありますか？私はjQueryをロードしていますが、それを回避するか、少なくとも使用可能なCSSフォールバックを使用したいと考えています。

アドバイスありがとうございます！

4

1 に答える 1

14

これを試してくださいタグ内にスパンを追加し、反対方向に傾斜を設定します（ https://developer.mozilla.org/en/CSS/-moz-transformに従って正しいと見なされるskewXの使用に注意してください）

<ul id="nav">
    <li><a class="current-menu-item" href="#"><span>Nav Item 1</span></a></li>
<li><a href="#"><span>Nav Item 2</span></a></li>
<li><a href="#"><span>Nav Item 3</span></a></li>
</ul>

ul#nav li a {
    display: inline-block;
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
            transform: skewX(-10deg);
         -o-transform: skewX(-10deg);
       -moz-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    color:#757575;
}

ul#nav li a span {
    display: inline-block;
            transform: skewX(10deg);
         -o-transform: skewX(10deg);
       -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
}
于 2012-07-10T17:59:57.303 に答える