3

私はここでクールなCSSを使用しています：

http://css-tricks.com/snippets/css/css-triangle/

jQueryで完成させるもののために単純な三角形を作成しています。問題は、三角形の2つの辺に境界線を付ける必要があることです。三角形が境界線でできているのを見ると、これは私に頭痛の種を与えています。

ここでこの写真を見てください：

ここに画像の説明を入力してください

他のオレンジと混ざらないように、A面とB面に境界線を付ける必要があります。

三角形自体のcssのピークは次のとおりです。

.arrow-down {
        position:relative;
        top:30px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
}

だから、私は別の解決策を受け入れています（珍しいですよね？）。すでに多くの作業を行っているという理由だけで、現在の設定を使用したソリューションを希望します。いずれにせよ、私はこれに境界線を持たせる必要があります（私を「絶望的」と呼ぶことができると思います）。

乾杯と助けてくれてありがとう！

4

6 に答える 6

5

「少し」の変更でこれを達成できます。それが最善の方法かどうかはわかりませんが、確実に機能します。

アイデアは、オレンジ色の三角形の後ろに2番目の「少し大きい」三角形を配置することです。

実例を試してみてください@jsfiddlehttp : //jsfiddle.net/saelfaer/e4ahw/

2つの三角形を重ね合わせた後、2ピクセル上に移動してtop: -2px、オレンジ色のボックスの上に配置します。これにより、矢印を付けたいdivの周りを走る黒い境界線を隠します:)

于 2011-10-05T23:36:39.140 に答える
4

これは難しい答えというよりは概念的な考えです（私はCSSを使っているあなたほど良くはありません）。しかし、同じアイテムを一番上のアイテムと同じ位置に配置するだけで、1つ以上のピクセルでオフセットされ、zインデックスが小さくなると、人々がシャドウをドロップするのを見てきました。

この場合、おそらくそのようなことを行うことができます。2つ目の三角形を作成し、それを黒に着色して、メインの赤い三角形より1ピクセル下（top：31px）に配置します。赤い三角形の下にあるので、要件の一部である上部の境界線も非表示になると思います。

于 2011-10-05T23:35:22.523 に答える
4

これがIE7で動作するかどうかは実際にはわかりません...

.arrow-down {
        position:relative;
        top:30px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid #000;
}
.arrow-down:before {
        content: '';
        position:absolute;
        top: -22px;
        left: -20px;
        margin-left:auto;
        margin-right:auto;
        padding-top:30px;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
}

私のハッキーソリューション はこちらをご覧ください

于 2011-10-05T23:45:40.027 に答える
2

これを試してください：http：//jsfiddle.net/rSzds/1/

CSS：

.arrow-down-border {
        width:0;
        height:0;
        position:relative;
        border-left:22px solid transparent;
        border-right:22px solid transparent;
        border-top:22px solid black;

}
.arrow-down {
        padding:0px;
        position:absolute;
        width:0;
        height:0;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        border-top:20px solid #FF6A00;
        margin-left: -20px;
        margin-top: -21px;
        float: left;
}

HTML：

<div class="arrow-down-border">
    <div class="arrow-down">
    </div>
</div>

IE7ではテストしていません。

于 2011-10-06T00:03:51.893 に答える
1

黒色の.arrow-down-borderクラスと、2番目の三角形のdivを作成します。

フィドル

于 2011-10-05T23:48:45.140 に答える
-2

＆＃9660▼</ p>

＆＃9661▽</ p>

＆＃9662▾</ p>

＆＃9663▿</ p>

＆＃9947⛛</ p>

＆＃9207⏷</ p>

于 2017-09-24T21:42:26.503 に答える