CSS のみを使い画像を使わないで三角形が作れると装飾の幅が広がり便利である。

現代のテクノロジーでは SVG が使えるのでそれでやれば済む話。

#hoge{
    width: 100px;
    height: 100px;
    border-top: 50px solid rgba(0,0,0,0.0);;
    border-bottom: 50px solid rgba(0,0,0,0.0);;
    border-left: 100px solid #00f;
    border-right: 50px solid rgba(0,0,0,0.0);;
    box-sizing: border-box;
}

ある要素にborder で線を引く。上下左右全部に引く。上下左右の色を全部違う色にする。 線の太さをどんどん太くしてみる。線が折れて色が切り替わる部分が斜めになっていることがわかる。 この斜めの形状を利用して三角形を作る。

現状4つの台形に囲まれた四角形のような形状になっていて、この四角形部分が要素になる。 この四角形の要素部分が小さくなれば台形の頭がどんどん細くなることになり、要素の大きさゼロになったとき台形が三角形になる。

これが CSS で三角形を作れる原理になる。

後は、1つの辺だけを残して後の色を透過色にすれば三角形1つだけ独立して取り出せることになる。

左側線を例にすると、要素の高さが底辺で高さが線の太さの三角形となる。

これを正三角形にしようとすると底辺の半分に√3 を掛ければ線の太さが求まることになる。

要素の高さが 100px だとすると半分は 50px なので線の太さは 50 x 1.73 ≒ 86px となる。