CSSだけで三角形を描く

画像を一切使わずに,HTMLとCSSだけで三角形を描く方法をご紹介. まずは結論,どうやって描くかを紹介し,その仕組みを説明. 最後になぜこの記録を書いたか,そのキッカケも紹介する. それでは"CSS三角形"をサクッと描いて行こう.

どうやって描く?

次のスタイルで"CSS三角形"を描くことが出来る.
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 三角形の底辺の長さの半分;
  border-bottom: solid 三角形の高さ 三角形の色;
  border-top-width: 0;
}
これで上向き三角形▲が出来上がる. "三角形の底辺の長さ"と"三角形の高さ"については下の図を見て欲しい.
Baseが"三角形の底辺の長さ",Heightが"三角形の高さ"である. CSSには底辺の長さの半分の値をborder-widthに指定する. 半分の値というところがミソである(詳しくは後述). これ,三角形の向きが例えば右向きであっても,先と同じ箇所が底辺,高さとなる点に注意. 次のように.
ちなみに,右向きの三角形をつくるには次のCSSを用いる.
.triangle-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 三角形の底辺の長さ割る2;
  border-right: solid 三角形の高さ 三角形の色;
  border-left-width: 0;
}
上向きの時bottomとtopであったスタイルをrightとleftにするだけ. 三角形の底辺方向(top,bottom,right,left)に"solid 三角形の高さ 三角形の色"を,頂点方向のborder-widthを0にセットする,と覚えよう. この法則に従うことで,4方向の三角形を自在につくることが出来る.

See the Pen CSS Triangle by Hideyuki Tabata (@seeker5084) on CodePen.

borderを操ることで,画像を一切用いること無く三角形を描くことが出来る. では,なぜborderだけで三角形になるのか. 次の章へ進んでみよう.

なぜそうなる?

"CSS三角形"を理解するための第一歩はブロック要素の形を見ることである.
borderのあるブロック要素
borderをもう少し厚くして,borderの上下左右を色分けしてみると次のようになる.
border-left-colorなどで色分けしてみたborder
各borderの端を見ると角度が付いていることが分かる. この角度がポイントで,実は三角形の斜辺になる. この要素のwidthとheightを0にしてみる.
要素のwidthとheightを0にした所
ご覧のように4つの三角形がくっついたようになる. 後は必要なborder(例えばbottom)だけに色をつけて,残り全ての色は透明にすると次のようになる.
border-bottom以外の色(要素背景とborderの色)を透明にする
要素自体の大きさは先程と同じで,今見える三角形▲の高さの2倍ある. これでは気持ちが悪いので不要なborderの幅(この場合border-top-width)を0にする. こうすることで要素自体の大きさがborder-bottomの大きさ,すなわち三角形の高さと同じになる.
border-topを0にすれば要素の高さが三角形の高さになる
これが"CSS三角形"のトリックである.

きっかけ

Amazon.co.jpでウィンドウショッピングを楽しんでいた時の話し. ふと"ベストセラー1位"のリボンが気になった.
私はWebサーフィンをしていると,どのようにHTMLが書かれているのか気になってしまい,ついインスペクタを開いてしまう癖がある. このリボンの切れ端(魚の尻尾のような形)がどのように描かれているのか気になってしまったのだ. 画像を使っているのかと思い,拡大してみた.
星マークは画像を使っているらしく,拡大に伴って画質が落ちたが,気になるリボンはくっきり綺麗なまま. ベクター画像を使っているのかとも思ったが,それならば星にもベクター画像を使うはずだ. Webインスペクタを開いてリボン全体の要素を検証した.
"ベストセラー1位"という部分の正体はiタグだった. そのタグの中には:before:after2つの疑似要素(Pseudo-elements)がある. どうやらこの疑似要素がリボンの切れ端を描いているようだ.
iタグの背景色を変更してみたところが上の画像. 2つの三角形をiタグに重ねることでリボンの切れ端を表現していた! 素晴らしい… そしてこの2つの三角形は2つの疑似要素で描かれているようだった.
:beforeが下の三角形(▲),:afterが上の三角形(▼)だった.
:afterのスタイルを見てみると,border-topやborder-bottom-widthなどと,borderをいじっていることが判明. これがきっかけとなり,調べてゆくとborderの操作だけで三角形が描けることが判った. ピュアなCSSで描かれているので画像のようにリソースをダウンロードする手間も無く,画質の劣化も無い. ただし,塗りつぶしの三角形しか描けない点が惜しい. つまり,アウトライン化出来ないということ. ちなみに,Amazon.co.jpではリボンの切れ端以外でもこの"CSS三角形"を利用していたので,ぜひ見つけてみて欲しい.
5820426725118193839 http://www.storange.jp/2017/05/css.html http://www.storange.jp/2017/05/css.html CSSだけで三角形を描く 2017-05-20T11:18:00+09:00 http://www.storange.jp/2017/05/css.html Hideyuki Tabata 200 200 72 72