擬似要素で三角形を作る

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

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

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

```css: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;
}
```

そうするとこうなる。
<img width="333" alt="1 a.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/614575df-96e6-6c00-c612-01b1b1b2a124.jpeg">



小さいので大きくしたい。
なんとなくwidthを0pxから50pxにしてみた。
![3 heightを50pxにしても変わらないa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/de38ef08-daa5-928b-883d-c62bc95e33d0.jpeg)


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

...変わらない。

そうだ、borderだからだ。
大きさはborder-widthが担っている。
ならばwidthとheightは0pxに戻して、border-widthを50pxに。
![4 height 0,width 0 でborder-width 50pxにa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/784f070c-0fea-6d16-e4ab-30b38239dbf2.jpeg)


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

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

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

```css:css
    border-color:  #0df #09b #057 #002;
```
そうするとこう。
![5 さっきのは置いといて、今度はすべてに色を付けてみたa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/af5db6cb-920b-5766-fe74-1d5a700e446d.jpeg)

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

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

```css:css
    border-width: 30px 60px;
```
するとこう。
![8 solidに戻り、今まで一括30pxだったborder-widthを30px 60pxにしたa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/0559962e-0b1e-0890-6cf9-9553694be8d5.jpeg)

横に伸びたし、崩れていない。
この状態でborder-colorの1,2,3つ目の値をtransparentにすれば右向きの三角が、
2,3,4番目をtransparentにすれば下向きの三角ができる。
![12a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/7bde63cc-daa7-79ef-3dd2-483ff950f33b.jpeg)

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

![11a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/0379d633-8514-46ab-c5b5-e6ec618c1fd7.jpeg)
border-widthに1つ値を入れると上の図の赤、黄、ピンク、青の4箇所ともその値になる（つまり正方形）。
2つ入れると赤とピンクが1つ目の、黄と青が2つ目の値を反映する。
3つ入れると赤が1つ目、黄と青が2つ目、ピンクが3つ目の値を反映する。

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

```css:css
    border-width: 30px 60px 10px;
```
![10 今度は30px 60px 10pxにしたa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/ee2316bd-a0e8-0b72-f435-4b417b5d8ba9.jpeg)


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

〈番外編〉
・border-width: 30px;のまま、border-styleをsolidからdottedにしてみた。
![6 5のsolidをdottedにしてみたa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/3df39311-496b-19b6-071d-d8d54170fc12.jpeg)


角がいい感じに丸くなった。
ただしborder-width: 30px 60px;など縦≠横の時は形が崩れる。
![9 8のままdottedにしたら崩れた　dottedは縦＝横の場合のみ角が丸くなるらしいa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/ccf8e9ef-b86e-ae28-cc4a-f6f84755fb77.jpeg)
こんな感じに。まあ角を丸くする場合はborder-radiusを使えばいいと思う。

・同条件でborder-styleをdoubleにしてみた。
![7 今度はdoubleにしてみたa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/7d8ceaeb-eebe-ec15-a865-5f0dab0aa851.jpeg)

border-widthを30px 60pxにしても崩れない。
![doublea.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573864/87317688-2fd8-86a6-5ebb-5c70cb858d5b.jpeg)

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

おわり。