clip-pathって何？基本を知ろう
CSSのclip-pathプロパティは知っていますか？図形を書くときに、CSSを使って文字情報だけでできるようになる便利なプロパティです。
要素の表示させたい領域を作って、図形を描画することができます。
……なにをいっているんでしょうかね
つまりはこういうことです。
上記の例では、薄くなっている所は消え、中央の五角形だけが残ります。
これによって、五角形を作成することができます。
このような感じで、表示させる領域をCSSで作成して、切り抜くようなイメージをしてもらえればわかりやすいかと思います。
CSSを使っているので、画像はもちろん、背景色を変更する事で、様々な色に変更する事もできます。
うまく使えれば矢印や楕円、三角形や多角形を描画する事ができます。
こういった図形は、コンテンツに配置するアイコンとしてよく使われますね。
CSSを使わなくても、画像を用意する事で対応できますが、デザインソフトを立ち上げて画像を作るのは地味に時間がかかります。
またアイコン類に色のバリエーションを持たせようとすると、数が多くなるほど大変になります。
作成したサイズよりも大きく使うとなると、作り直しが必要になったりと、なかなかに面倒です。
FontAwesomeを使う事も検討できますが、思ったような図形がない…、線が太くてイメージと違う…という事もあって、小回りが利かない場合も多々あります。
CSSを使って図形を作れれば、色やサイズの変更は簡単です。
clip-pathの基本的な使い方
それでは実際にどうやって使っていくのか紹介しますね。三角形
三角形を書きたい要素にCSSで、clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
を設定してみると描画する事ができます。
円
円形を書きたい要素にCSSで、clip-path: circle(40%);
を設定してみると描画する事ができます。
矢印
書きたい要素にCSSで、clip-path: polygon(0 15px, 150px 15px, 150px 0, 100% 50%, 150px 100%, 150px 35px, 0 35px);
を設定してみると描画する事ができます。
一部が円になった長方形
書きたい要素にCSSで、clip-path: path(‘M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z’);
を設定してみると描画する事ができます。
解説
polygon()を使うと、角の位置を指定して多角形を描画する事ができます。カンマ（,）で区切って、点を打っていくようなイメージです。
点の位置は、X軸 Y軸となるように続けて書いていきます。
サンプルではpxですが、%を利用することもできます。
指定できる点は無限にあるので、頑張って設定していくと、ものすごい多角形な図形も描画する事ができます。
※ただし管理が大変です…
path()を使うと、SVG の塗りつぶし規則と SVG のパス定義を用いて形状を定義します。
正直、何をどうやって書いているのかよくわかりません！！
エッ！じゃぁどうやって使うの？？？
と思ったでしょう。
便利なものがあるんです。
そう、ジェネレーターです。
ジェネレーターを活用して図形を作ってみよう
なんとなくの概念がわかったら、ジェネレーターを活用して作業スピードを上げつつ、図形を書いていきましょう。↓とても便利です↓
https://bennettfeely.com/clippy/
どんな図形を書きたいのかを選んで、頂点をマウスで操作すればCSSを書き出してくれます。
コードが出来たら使いたい箇所に設定して、完了です！
ただし、どういった原理で描画できているのかを、なんとなくでもわかっているのと、わからないのでは全然違います。
角をどうやって作っているのかがわかると、少し扱い易くなりますよ。
CSSを活用していこう
clip-pathを使えば、CSSを使って図形を描画する事ができます。原理を理解して、頑張って書き込んでいけば、ものすごく複雑な図形を書く事もできるでしょう（たぶん）。
そこまでやるなら、画像を配置した方が遥かに簡単で、ソース管理も都合がいいと思いますが。。。
例題では背景色を付けた単色ですが、画像を設定して切り抜くような事もできたりするので、幅が広がります。
clip-pathを使うとっかかりとなれれば幸いです。
