web-dev-qa-db-ja.com

CSSのみを使用して矢印を作成するにはどうすればよいですか？

次の例を見ました。

.arrow {
   height: 0;
   width: 0;
   border: 4px solid transparent;
}
.arrow.up {
   border-bottom-color: #000;
}
.arrow.down {
   border-top-color: #000;
}

http://jsfiddle.net/FrsGR/

しかし、それがどうやって矢を作るのか理解できません。誰かがこれを私に説明できますか？

cssgeometrycss-shapes
33
user1943020

以前はこのトリックを知りませんでしたが、理解できたと思います。下の境界線は正方形ではなく、側面が面取りされています。左のボーダーは上部と下部で面取りされます。これは、異なる色の境界線がきれいに出会うようにするためです。矢印要素の高さと幅は0であるため、境界線セグメントの下部は、境界線ルールで指定した幅と同じですが、幅は0px（コンテナーのサイズ）まで狭くなります。

さまざまな境界線の太さを設定したり、境界線ルールの「側面」を変更したりして、効果を試すことができます。 「矢印」は常にルールで設定された方向の反対を指します。下の境界線は上向きです。右の境界線は左を指します。

ここに簡単な図があります：

enter image description here

左は矢のトリックです。右は、コンテナーにいくつかの寸法がある、より一般的な境界です。

29
Surreal Dreams

箱を取る。たとえば、高さが5ピクセル、幅が5ピクセルだとします。 4pxのボーダーがあるとしましょう。これがあなたが思い描くべきものです： http://jsfiddle.net/FrsGR/19 。

.arrow { // box
   height: 5px;
   width: 5px;
   border: 4px solid blue;
}

ボックスに幅または高さがないため、境界線 http://jsfiddle.net/FrsGR/885/ が残っていると想像してください。

.arrow { // box with no width/height
   height: 0;
   width: 0;
   border: 4px solid blue;
}

それらは互いに重なり合い、矢印を作成することで魔法が発生します。オーバーラップラインは、各コーナーから中心に対角線上に描画されます。したがって、最終結果は、上、左、右に透明な三角形、下部に黒い三角形になります。お役に立てば幸いです。

すばらしい参照： CSS三角形はどのように機能するのですか？

4
Anthony

CSSは、.arrowで指定された4pxの寸法でポイント（幅/高さはなく、いくつかのX、Y座標）の周りに境界線を作成しています。これは、半径4pxの円を作成するのと似ていますが、CSSの境界の性質上、「円」は実際には正方形です。

このようにして、半径4pxの四角形の四分円すべてを見ることができます。

.arrow.up {
    border-top-color:blue;
    border-right-color:green;
    border-left-color:red;
   border-bottom-color: #000;
}

4pxの代わりに40pxのサイズを使用したズームインの例を次に示します。

http://jsfiddle.net/dqB32/1/

0
DrewP84