CSSのborderで三角形を作る

CSSのborderで三角形を作ります。

図形や文字を使わないで画面に三角形を置きたいのであれば、こちらの方法を取ることになります。

CSSの三角形のコード例を記載する

HTMLにsankakuクラスのdivを記載します。

一応ですが、クラス名のsankakuは適当ですので任意のクラス名で構いません。

<div class=sankaku></div>

CSSでsankakuクラスのボーダーを設定します。

.sankaku {
 /* borderを設定した上で透明にする */
 border: solid 20px transparent;
 /* 下のborderのみ緑にする */
 border-bottom-color: green;
}

これで三角形を表示できます。

ではなぜborderで三角形を作れるのかを簡単に説明します。

最初は私もなぜborderを設定しただけで三角形が作れるのか意味が分かりませんでした。

値がある要素のborderを見て、値がない要素のborderを見ると分かりやすいです。

値がある要素のborderは下記のようになります。

注目するべきはborderが4辺で構成さらていて、角がとがっているということです。

要素の値をなくしてみるとborderはどのようになるでしょうか。

答えは下記になります。

4辺のborderのとがった部分だけが残って組み合わさって四角形になります。

四角形にした状態から残したい三角形以外を透明にします。

つまり残したいborder以外を透明にします。

上記のコード例ではいったん4辺のborderをtransparentで透明にし、border-bottom-colorで底の1辺だけを緑色にしています。

そうすると下記になります。

三角形の完成です。

これがborderで三角形を作成できる理由です。

三角形の位置を変更するには、positionをabsoluteにしてください。

positionは要素がどのように配置されるかを規定します。

absoluteは他の要素に寄らないようにできます。

そしてtop、right、bottom、leftを指定することで場所を変更できます。

下記は例です。

position: absolute;
top: 20px;
left:10%;

三角形を作成して自由に配置しましょう。