CSS_html/css_WEB-ITnose で三角形を描画する

紹介

CSS を使用した三角形の描画は、border プロパティの単純な適用です。ボーダー属性を使用する際にさらに注意してみると、コツが見えてきます。次に、最初に次のコードを見てみましょう:

HTML代码：<div class="test"></div>----------CSS代码：.test{    width: 10px;    height: 10px;    border-top: 50px solid black;    border-right: 50px solid red;    border-bottom: 50px solid blue;    border-left: 50px solid orange;}

効果は次のとおりです:

ボックスのコンテンツの幅と高さが境界線よりもはるかに小さい場合、境界線が次のように表示されることを確認するのは難しくありません。二等辺台形。このことから、div の幅と高さを 0 に設定すると、ボックスの内容を表す白い四角形が消え、同時に境界線が二等辺三角形として表示されることが推測できます。コードは次のとおりです:

HTML代码：<div class="test"></div>----------CSS代码：.test{    width: 0;    height: 0;    border-top: 50px solid black;    border-right: 50px solid red;    border-bottom: 50px solid blue;    border-left: 50px solid orange;}

効果は次のとおりです:

描画

この時点で、上記の内容に基づいてさまざまな向きの三角形を描画できます。たとえば、上向きの三角形が必要な場合、他のものについては、上境界線などを設定する必要はありません。コードは次のとおりです:

HTML代码：<div class="test1"></div><div class="test2"></div><div class="test3"></div><div class="test4"></div>----------CSS代码：.test1{    width: 0;    height: 0;    border-right: 50px solid transparent;    border-bottom: 50px solid blue;    border-left: 50px solid transparent;}.test2{    width: 0;    height: 0;    border-top: 50px solid transparent;    border-bottom: 50px solid transparent;    border-left: 50px solid orange;}.test3{    width: 0;    height: 0;    border-top: 50px solid black;    border-right: 50px solid transparent;    border-left: 50px solid transparent;}.test4{    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 50px solid red;    border-bottom: 50px solid transparent;

効果は次のとおりです:

さらに一歩進みます

描画を実装するコードでは、各三角形の border-color プロパティで 2 つの境界線が透明に設定されていることがわかります。理由としては、属性値を変更して試してみることができます。 コードは次のとおりです。

HTML代码：<div class="test"></div>CSS代码：.test{    width: 0;    height: 0;    border-right: 50px solid red;    border-bottom: 50px solid blue;    border-left: 50px solid orange;}

効果は次のとおりです。

ボーダーを完全に設定した場合と、上のボーダーを 1 つ減らした場合の効果を比較すると、次のようになります。オレンジと赤の三角形が上部の半分ずつ欠けていることがわかります。 3 つの境界線を設定する必要があり、両側の境界線の border-color プロパティを透明に設定する必要があることがわかります。

まとめ

このまとめを書くのは、最近この問題を提起している人を見かけ、最初の試みを思い出したので記事を書きました。比較的簡単な文章ですので今後機会があれば充実させていきますのでご指導よろしくお願いいたします。

CSS を使用して単純なグラフィックを描画する場合は、ICONO: 純粋な CSS アイコンを学習することをお勧めします