Shitou は、純粋な CSS3 を使用して三角形と矢印を描画する方法を教えます。 _html/css

Shitou は、純粋な CSS3 を使用して三角形と矢印を描画する方法を教えます。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:52:18

オリジナル

2079 人が閲覧しました

いくつかのウェブサイトで三角形のグラフィックをよく見かけますが、通常はこれらは写真です。Stone が純粋な CSS3 テクノロジーを使用して三角形のグラフィックを描く方法を教えます。

以下は具体的な手順です。これらを読むと、三角形と矢印の描き方が理解できます。

1. 新しい要素を作成します。任意の要素ですが、私はそれを行うためにブロック要素を使用することがよくあります。要素がインラインの場合は、表示:ブロックします。

2. width と height を height:0px; width:0px; に設定します

3. 三角形を実装するために border 属性を設定します。

まず、境界線がどのように見えるかを理解する必要があります。具体的なコードは次のとおりです。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>绘制三角形</title>    <style>        .box{            margin: 20px auto;//设置图形居中            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;            border-right-color:gold;            border-bottom-color: #333333;            border-left-color: red;        }    </style></head><body><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>

ログイン後にコピー

スクリーンショットは次のとおりです。 4 つの境界線を相互に移動することと同じです。正方形の中心が引き伸ばされます。

上記のコードは、4 つの三角形を 1 つの正方形にマージしているように見えます。ここでは、必要なものを保持し、その他を透明に設定して、三角形の効果を実現します。

それぞれ、下向き、右向き、左向き、上向きの三角形を描きます。

実装コードは以下の通りです。

!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>绘制三角形</title>    <style>        .box{            margin: 20px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;            border-right-color:gold;            border-bottom-color: #333333;            border-left-color: red;        }        .box1{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-top-color: #2DCB70;        }        .box2{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-left-color: red;        }        .box3{            margin: 5px auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-right-color:gold;      <span style="white-space:pre">	</span>}

ログイン後にコピー

        .box4{            margin: 0 auto;            width: 0px;            height: 0px;            border: 50px solid transparent;            border-bottom-color: #333333;        }    </style></head><body><div class="box"></div><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>

ログイン後にコピー

スクリーンショットは次のとおりです:

上のグラフィックからわかるように:

下向きの三角形の矢印を描くことは、上の境界線を下に伸ばすことと同じです。

border-top-color: #2DCB70;

上向きの三角形の矢印を描くことは、下の境界線を上に伸ばすことと同じです。

border-bottom-color: #333333;

左向きの三角形の矢印を描画することは、右の境界線を左に引き伸ばすことと同じです。

右向きの三角形の矢印を描くことは、左の境界線を右に引き伸ばすことと同じです。

上記を読んだ後、CSS で三角形の矢印を描画する方法を学びます。