0

私はワードプレスのローカルインストールを持っており、テーマを扱っています。ページ上にある場合、「現在のページ」には三角形の動的な色付きの線があります。最終的な目標は、三角形を取得してメニュー項目全体に複製し、中央に配置された単一の効果ではなく、ギザギザの効果を出すことです。「動的メニューの強調表示」でいくつかの資料を見つけましたが、適用方法がわかりません。 。画像や背景画像ではなく、純粋にcssのようです。以下は、styles.cssのcssサンプルです。変換を試してみると、希望する結果ではなく、いくつかの結果を得ることができます。誰かが助けてくれることを願っています。ありがとう！

.not-ie #main-nav .current_page_item:after,
.not-ie #main-nav .current_page_parent:after,
.not-ie #main-nav .current-menu-item:after {
    background: #f15a23;
    bottom: -2.5px;
    content: '';
    left: 50%;
    display: block;
    height: 5px;
    margin: 0 0 0 -2.5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    width: 5px;
}
4

1 に答える 1

0

ここにcss三角形の良い説明があります：CSS三角形はどのように機能しますか？

ただし、この手法を使用して、1つのhtml要素のみを使用して複数の三角形を作成することはできません。

より多くの三角形を表示できるように、より多くの要素を導入することもできますが、これは私にとって優れた解決策のようには思えません。したがって、この場合、画像を使用するのが最も簡単な場合があります。画像を使用する利点は、さまざまな幅の要素がある場合に、画像を水平方向に繰り返すことができることです。

編集：

私は別のcssのみの解決策を見つけました（ここでlea verouの3番目の要素に大きく影響されています：http：//leaverou.github.com/animatable/ ） -しかし、それはIEでは機能しないため、解決策ではない可能性がありますあなたのために、しかしあなたが興味を持っている場合のために、ここにそれがあります：

#zig_zag {
    width: 140px;
    height: 5px;
    border-top:1px solid #E91010;
    background-repeat: repeat-x;
    background-position:10px 0;
    background-size: 7px 10px;
    background-image:
        linear-gradient(-45deg, #E91010 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #E91010 75%),
        linear-gradient(45deg, #E91010 25%, transparent 25%),
        linear-gradient(-45deg, transparent 75%, #E91010 75%);      
}

ここのjsfiddle：http: //jsfiddle.net/hGy6X/

[注：leaverouのプレフィックスフリースクリプトhttp://leaverou.github.com/prefixfree/を使用します]

于 2012-10-08T08:42:32.863 に答える