Webデザイン

CSSのclip-pathプロパティで三角形を描画する

 
CSSのclip-pathプロパティを使って三角形をコーディングする

どうもこんにちは。
Web/App/UIデザイナーのサトウです。

今回は、CSSのclip-pathプロパティで三角形を描画するという内容で書いていきます。

皆さんは、三角形をコーディングするときどんな方法でコーディングしていますか？
例えば、ページ内やページ間を移動するためのボタンにアイコンを付けたいときや、吹き出しのようなデザインを実装したいとき、あるいは視線誘導のための矢印など、三角形をコーディングしたい局面は結構多いものです。

borderプロパティや画像を使った三角形コーディング

僕はこれまで、CSSでborderを駆使して描画する方法と画像を使用する方法を使い分けていました。
サイズが固定だったり、形が単純だったりする場合にはborderで、他の要素に合わせてサイズを変えたかったり、ちょっと変わった形だったりする場合には画像で、というように。

CSS border プロパティを使った三角形

幅と高さが0pxのブロック要素（またはインラインブロック要素）に対して上下左右で任意の太さのborderを設定し、それらのborderの重なり部分の形状を利用して三角形を実現しています。

See the Pen
CSS triangle use border by foolishlife (@foolishlife)
on CodePen. 

<div class="triangle"></div>
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 0 60px 80px;
  border-color: transparent transparent transparent #fff;
}

body {
  background: #111;
}

ちなみにCSSのborderを使って三角形を作る際、僕はこのジェネレーターを使っています。
CSS triangle generator

画像を使った三角形

画像でコーディングする際はsvgを使うことが多いですが、pngでやることもあります。

画像でコーディングする三角形

clip-path プロパティを使った三角形コーディング

前述したCSSのborderプロパティを使ってコーディングする方法や画像を使う方法に代わり、主流になりそうな三角形のコーティング方法。
それがCSSのclip-pathプロパティを使ったコーディング方法です。

任意の幅と高さを持ったブロック要素（またはインラインブロック要素）に対し、指定した座標を結んだ形状（パス）で切り抜く（クリッピング）ことで三角形を実現しています。

See the Pen
CSS triangle use clip-path by foolishlife (@foolishlife)
on CodePen. 

<div class="triangle"></div>
.triangle {
  background: #fff;
  width: 80px;
  height: 120px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

body {
  background-color: #111;
}

CSSのソースコードを見てわかるとおり、borderで実現する方法に比べて非常に考え方がシンプルでわかりやすいですね。

元となるブロック要素（またはインラインブロック要素）の縦横サイズとクリッピングする座標次第でどのような形にも切り抜けるので、かなり自由度も高いです。
もちろん、右向き、左向き、上向き、下向きといった三角形も自由自在です。

See the Pen
CSS triangle use clip-path 4direction by foolishlife (@foolishlife)
on CodePen. 

<div class="triangle triangle-horizontal triangle-right"></div>
<div class="triangle triangle-horizontal triangle-left"></div>
<div class="triangle triangle-vertical triangle-up"></div>
<div class="triangle triangle-vertical triangle-down"></div>
.triangle-right {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.triangle-left {
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.triangle-up {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.triangle-down {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.triangle-horizontal {
  width: 40px;
  height: 60px;  
}
.triangle-vertical {
  width: 60px;
  height: 40px;  
}
.triangle {
  display: inline-block;
  background: #fff;
  margin: 0 5px;
}
body {
  background-color: #111;
}

同じ三角形を4方向に展開するのであれば、

transform: rotate();

を使うほうがいいケースもあるかもしれませんが。

「%」を使った相対的なサイズ指定ができる

clip-path プロパティを利用した三角形の便利なところは、親要素のサイズが明確になってさえいれば「％」を使って親要素に対して相対的なサイズ指定ができるということです。

aspect-ratioプロパティと組み合わせるとさらに使いやすくなりますね。

See the Pen
CSS triangle use clip-path persent size by foolishlife (@foolishlife)
on CodePen.

LPなどではセクションの区切りにこういった形で三角形を配置して視線誘導するケースが結構あるので、そういった際に便利です。
また、全画面の写真やイラストをクリッピングしたいときなどにも便利に使うことができますね。

clip-pathプロパティを利用して吹き出しの尻尾を作る

吹き出しの尻尾をCSSで作ろうとしたとき、borderプロパティを利用した三角形では根本よりマイナス方向に垂れる尻尾は作れません。
が、clip-pathプロパティを利用すれば、好きな大きさ、好きな角度の尻尾を作ることができます。

See the Pen
Untitled by foolishlife (@foolishlife)
on CodePen. 

<div class="fukidashi">
  吹き出しです
</div>
.fukidashi {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 1.5em;
  border-radius: 1.5em;
}

.fukidashi::after {
  content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  background: #fff;
  bottom: 0;
  left: 25%;
  transform: translate(0, 100%);
  clip-path: polygon(25% 0, 100% 0, 0 100%);
}

body {
  background: #111;
}

便利ですね。
clip-path プロパティは、Chrome, Safari, Edge, Firefoxといった広く利用されている一般的なブラウザの最新版で問題なく動作します。

CSS clip-path property (for HTML) | Can I use… Support tables for HTML5, CSS3, etc

ちなみに、clip-path プロパティを使うと曲線を駆使したさまざまな形も作ることができます。
ぜひいろいろな形を試してみてください。

clip-path – CSS: カスケーディングスタイルシート | MDN

さて、今回は、CSSのclip-pathプロパティで三角形を描画するという内容で書いてみました。
いかがだったでしょうか？
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。

CSS HTML コーディング
こちらの記事もいかがですか？