CSSを使った三角形の描き方を紹介

CSS を使用して三角形を描く方法を尋ねるインタビューの質問を見ました

ご存知のとおり、多くのグラフィックは三角形に分割できるので、三角形の描き方を知っていれば、多くの興味深い形を描くことができます

三角形の描画原則は、境界線の幅、線のスタイル、色を 4 方向に調整することです。

幅を十分に大きくし、色をさまざまな方向に変更すると、ボックス モデルの境界線が 4 本の台形のような線になっていることがわかります。

この時、ボックスモデル内の高さと幅を0pxに調整すると三角形が形成されます。

border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句
border-width:15px;　　　　　　　　//border-width代表所有方向的border
border-style:solid;
border-color:transparent；

原理を理解していれば、今すぐ自分でコードを書くことができるはずです。

width: 0;
    height: 0;
    border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色
    border-right: 50px solid transparent;　　　　//右边同上
    border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

上記のコードは下向き三角形を生成できます。下の図に示すように (理解しやすいように右側の色を置き換えました)

このレンダリングから、三角形を生成するには 3 つの境界線が必要であることがわかります。

左右の境界線の高さによって、三角形の高さが決まります。

三角形の高さは境界線自体の幅によって決まります

それでは、右下または左下を指す三角形を生成するにはどうすればよいでしょうか?

上の写真ですでにお分かりかと思います。

必要な境界線は 2 つだけです。

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

このコードは、底辺と高さが 100 ピクセルで、左下を指す三角形を生成します。

境界線の幅を覚えておいてください。

1行のコードで4つの境界線の幅を定義できます。

以上がCSSを使った三角形の描き方を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。