Speaking Design

Blogブログ

CSSだけで作れる三角形。色やサイズをすぐに変えられて便利

CSSだけで作れる三角形。色やサイズをすぐに変えられて便利

CSSのボーダーの特性(といっていいのかな?)を利用すると、スタイルシートだけで三角形が作れます。
画像で用意するのに比べ、色や大きさをすぐ調整できるので便利です。
わりと昔からある方法ですが、私も今だにお世話になることがあります。

目次

スタイルシートで三角形を作るしくみ

上向き三角形

三角を作るためのCSSがあるわけではなく、ボーダー(border)サイズ設定の特性を利用して三角形に見せている、というのが種明かしです。
以下はCSSだけで描いた上向き三角形です。

こんなスタイルシートでできています。

width: 0;
height: 0;
border-bottom: 34px solid #009688;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

ちょっと理解に苦しむ内容ですが、

1.要素自体のサイズは0*0にする
2.三角形の本体はborder-bottomで作る(border-bottom:34pxが三角形の高さになる)
3.border-left / border-rightで透明のボーダーを施すと、2で作ったボーダーが左右から20pxずつ削り取られて、三角になる

という考え方です。

正三角形を作りたい場合、辺や高さは以下のような比率で求められるので、

正三角形の比率
ちょっと数学チックですが

『border-bottom : border-left : border-right = 1.7 : 1 : 1』
で設計すれば正三角形になります。

その他の向きの三角形も、各ボーダーの役割を交代させて作ることができます。
一応サンプルを載せておきますね。

下向き三角形

border-bottomにやらせた仕事を、border-topで行えば下向き三角形になります。

width: 0;
height: 0;
border-top: 34px solid #009688;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

右向き三角形

こちらも考え方は同じです。

width: 0;
height: 0;
border-left: 34px solid #009688;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;

左向き三角形

border-leftで行っていた設定がborder-rightに変わっただけですね。

width: 0;
height: 0;
border-right: 34px solid #009688;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;

スタイルシートで三角形を作るメリット

この用法には以下の利点があります。

・構造(HTML)とデザイン(CSS)の分離
・色やサイズ、位置の調整がラク

Webデザインでは矢印として出番の多い三角形ですが、普段どのように実装していますか?

詳しくはこちら

こういう使い方、よくありますよね

HTMLで実装すると…(img要素)

真っ先に思いつくのがこの方法かもしれません。
実際、課題添削などでもこのやり方を見ることは多いです。

<p><img src="三角形の画像">詳しくはこちら</p>

表示上は問題ありませんが、情報はHTML、装飾はCSSという役割分担を考えると、飾りに相当する三角形をHTMLで実装するのはちょっと気が引けます。

スタイルシートで実装すると…(background-imageなど)

CSSのbackground-imageを使えば、HTMLを情報のみにしておくことができます(list-style-imageでもいいですね)

<p>詳しくはこちら</p>
p{
  background-image:url(画像のパス);
  background-position: /* 適切な位置に設定 */;
  background-repeat: no-repeat;
}

HTML/CSSの棲み分けとしてはこれで十分なんですが、三角形のサイズや色を変更する場合、いちいち画像を開いて書き出しし直して…っていうのが地味に面倒なんですよね。

その点今回紹介した方法では、CSSを変更するだけでチューニングができるというのが大きな利点です。

私がよくやる実装方法

それでは具体的にどうやればよいのでしょう。
真っ先にイメージするのはこんなやり方かもしれません(#triangleが矢印になります)

<p><span id="triangle"></span>詳しくはこちら</p>

でも実態のないspan要素は、できれば使いたくないですよね。
そこで代わりに、CSSの疑似要素(before)を使ってみます。

<p id="#arrowSample">詳しくはこちら</p>
#arrowSample{
  position: relative;
  padding-left: 17px;
}

#arrowSample::before{
  /* 擬似要素なので必須 */
  content: "";

  /* 三角の色やサイズに関する設定 */
  width: 0;
  height: 0;
  border-left: 10px solid #009688;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;

  /* 三角の位置に関する設定 */
  position: absolute;
  top:8px;
  left:0;
}

擬似要素自体の説明は割愛しますが、ざっくり言うとspan要素の代わりにスタイルシートで仮の要素を作り、そこに三角形を施しています。
コードをコピーして各数値をいじってみるとしくみが理解できると思いますので、試してみてください。

この方法だとHTMLもクリーンだし、画像も使わないので変更がラクですね。

まとめ

  • CSSの特性を使って、三角形を作る事ができる
  • CSSの三角形は、画像を使うより修正がラク
  • なるべくキレイなコードにすると言う意味では、擬似要素として使うと効果的

この方法はかなり昔からある用法らしく、また偶然三角形に見えてる感も否めなかったので、そのうち使用できなくなるのではないかと思っていたのですが、現在でも安定して使えています。
ボーダーの解釈や、擬似要素との組み合わせが入った時のややこしさはありますが、理屈がわからなくとも、本ページのコードをコピーしてカスタマイスすれば利用できますので、ぜひご活用ください。