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 https://www.storange.jp/2017/05/css.html https://www.storange.jp/2017/05/css.html CSSだけで三角形を描く 2017-05-20T11:18:00+09:00 https://www.storange.jp/2017/05/css.html Hideyuki Tabata Hideyuki Tabata

200 200

72 72