擬似要素で三角形を作る

初めて擬似要素で三角形を作ったのでさらにいろいろ数値を動かしてみた。

まずは擬似要素で三角形を作る。
三角形はborderで作る。
「三角形 擬似要素」で検索をかけるとたくさんヒットするので無数の記事を見ながら、とりあえず書いてみた。

html

<div class="triangle">
    <p>三角形をつくる</p>
</div>

css

.triangle::after{
    content: " ";
    border-style: solid;
    border-color:  #aaa transparent transparent transparent;
    border-width: 10px ;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0px;
    width: 0px;
}

そうするとこうなる。

小さいので大きくしたい。
なんとなくwidthを0pxから50pxにしてみた。

お、伸びた。
じゃあheightも50pxにしよう。

...変わらない。

そうだ、borderだからだ。
大きさはborder-widthが担っている。
ならばwidthとheightは0pxに戻して、border-widthを50pxに。

大きくなった。
これで大きさは自由に変えられる。
でも三角形の形は一律？
角度も変えたい。

では、角度も変えていく。

まずは分かり易いように各部分に色を付けてみた。
ちなみに上のコードに書いてあるtransparentは透明の意味。
border-colorを下のように書き換えてみた。（さっき作った三角形は左上へ移動させて、コードをコピペ、afterをbeforeに変えて、border-widthを30pxにした。）
（beforeやafterに関する記事　https://www.sejuku.net/blog/54556）

css

    border-color:  #0df #09b #057 #002;

そうするとこう。

border-color　1つ目の値が上、2つ目が右、3つ目が下、4つ目が左と対応している。
4つの三角形が中心を向いていて、1つの正方形が出来上がっている。
このまま4つとも色を同じにすれば正方形の擬似要素ができあがる。

次に今は一括で30pxにしているborder-widthを変えてみる。

css

    border-width: 30px 60px;

するとこう。

横に伸びたし、崩れていない。
この状態でborder-colorの1,2,3つ目の値をtransparentにすれば右向きの三角が、
2,3,4番目をtransparentにすれば下向きの三角ができる。

最初に作った三角形とは違う三角形になった。できた。

border-widthに1つ値を入れると上の図の赤、黄、ピンク、青の4箇所ともその値になる（つまり正方形）。
2つ入れると赤とピンクが1つ目の、黄と青が2つ目の値を反映する。
3つ入れると赤が1つ目、黄と青が2つ目、ピンクが3つ目の値を反映する。

3つ入れたときの様子はこんな感じ。

css

    border-width: 30px 60px 10px;

組み合わせ次第で好きな角度の三角形が作れることが分かった。

〈番外編〉
・border-width: 30px;のまま、border-styleをsolidからdottedにしてみた。

角がいい感じに丸くなった。
ただしborder-width: 30px 60px;など縦≠横の時は形が崩れる。

こんな感じに。まあ角を丸くする場合はborder-radiusを使えばいいと思う。

・同条件でborder-styleをdoubleにしてみた。

border-widthを30px 60pxにしても崩れない。

なんか面白いので機会があったら使いたいと思う。
ちなみにdashedはsolidと同じになるし、wavyはいなくなる。

おわり。