どもです。
今更感漂う、擬似要素で三角形まとめ。
Menu
そもそもどうして擬似要素で三角形が作れるのか
A. 高さ・幅が0の要素にborderをつけると、それぞれが三角形になるから。
普通の要素にborderを付ける場合、要素を囲む形でborderが配置される。
このとき、borderの切り口は隣接するborderの大きさとの比率に従って角度がつく（幅が同じなら45°）。
そのため、各borderの形状は台形になる。
要素の幅・高さが0になったとき、
台形の上辺が0になるので、borderの形状はそれぞれ三角形になる。
borderはそれぞれに大きさ・形状・色を指定できるため、1つを除いてborderを透明にする（transparent）ことも可能。
すると、
こうなる。三角形の完成。
要素のwidth、heightを0にするのが三角形の条件なので、擬似要素に限らず、空要素なら三角形は作れる。
が、空要素を作ることはSEO上好ましくないので、擬似要素で作るのが一般的。その方が使い易いし。
基本の三角形（二等辺三角形）を作る
上述の原理で三角形が作られるため、三角形の基本的な作り方は以下ようになる。
三角形を設置する要素:before{
position:absolute;
width:0;
height:0;
content:"";
border:任意px solid transparent;
border-底辺の方向-color:三角形の色;
}
幅・高さを0にした擬似要素について、transparentのborderを配置し、内1辺のみに着色する。
着色する三角形は、上向きならborder-bottom、右向きならborder-left。底辺の方向に着色するので注意。
このとき、border-widthはそれぞれの三角形の「高さ」を示す。
底辺は隣接するborder-widthの和になる。
デフォルトでは前述の図の通り、底辺の長さと高さの比率が2:1になるので、それ以外を作る場合は着色するborderの大きさを調節する必要がある。
正三角形の場合、底辺1に対して、高さが√3/2なので、borderに換算すると、
border : 着色border = 1 : √3（約1.73）
この基本さえわかっていれば、鋭角三角形or直角三角形ならどんな形でも作ることができる。
二等辺三角形以外の三角形を作る
二等辺三角形以外の三角形を作るなら、transparent状態にあるborderに着目すれば良い。
例えば直角三角形を作るなら、
図のように、隣接するborderも着色borderにする。
左右に偏ったborderを作る場合、
隣接するborderのborder-widthを非均等にする。
三角形の1辺は、隣接する三角形の1辺を共有しているので、隣接する左右の三角形の高さが違えば共有する辺の長さも異なる仕様。
但し、鈍角三角形は作れない。
どうしたら鈍角三角形が作れるのか
そもそも、なぜ鈍角三角形が作れないのかといえば、borderは底辺以外を隣接するborderと共有しているからだ。
この状態で鈍角三角形を作ろうとすれば、
なんかもう色々と破綻してしまう。
borderの仕様上、鈍角三角形は作れないわけだ。
それでも、どうしても作りたいなら、「見かけだけ」鈍角三角形を作ることならできる。
背景色と同じ色の擬似要素を、transformで回転させた三角形に被せて底辺を捏造する仕組みだ。
面倒だし、transformが旧いIEでは通じないしと色々厄介なので、できれば鈍角三角形は作りたくない。
塗り潰してない三角形の作り方
borderの1辺で三角形を作っているため、基本的には線だけの三角形は作れない。
ので、これも「見た目上」線だけの三角形を作る。
これを応用して「吹き出し」を作る手法がある。
afterの三角形を要素のborderに被せれば、それっぽくなる。
線だけの三角形を作る場合は、内側の三角形は一回り小さく作るが、吹き出しの場合はずらして配置するため、ふたつの三角形は同じ大きさにする。
まとめ
二等辺三角形の作り方
三角形を設置する要素:before{
position:absolute;
width:0;
height:0;
content:"";
border:任意px solid transparent;
border-底辺の方向:任意px solid 三角形の色;
}
直角三角形の作り方
三角形を設置する要素:before{
position:absolute;
width:0;
height:0;
content:"";
border:任意px solid transparent;
border-底辺の方向:任意px solid 三角形の色;
border-底辺の方向2:任意px solid 三角形の色;
}
二等辺でない三角形の作り方
三角形を設置する要素:before{
position:absolute;
width:0;
height:0;
content:"";
border:任意px solid transparent;
border-底辺の方向:任意px solid 三角形の色;
border-底辺と隣接する方向-width:任意px;
border-底辺と隣接する方向2-width:任意px;
}
鈍角三角形は作れない。
余談だが、border-radiusを設定すると底辺部だけが角丸になるので扇型になる。
ワンポイントつけたいけど三角形じゃ物足りない場合にぜひ。
記事書いてから気づいた。
図のborder-leftとborder-rightが全部逆だ。
オーマイガッ(´・ω・｀)