CSSのクリップパスを使った応用例の紹介

クリップパスとは

clip-path（クリップパス）というCSSの便利なプロパティの紹介です!
要素を好きな形に切り取って表示することができます！

以下はクリップパスを使って、要素の表示領域を三角形に変更する例です。

画像をクリップパスで切り抜くこともできます。

クリップパスの種類

クリップパスには、以下のような種類があります。

• polygon() : 多角形
• circle() : 円形
• ellipse() : 楕円形
• inset() : 四角形

polygon()

polygon()は、多角形を指定するための関数です。polygon()の中には、座標を指定します。

polygonでは以下のルールで座標を指定します。

• x座標 y座標の順番で指定します。
• 座標は、カンマ,で区切ります。
• 座標の間には、スペースを入れます。

例えば以下の場合は、x座標: 50px, y座標: 0pxとx座標: 0px, y座標: 100pxとx座標: 100px, y座標: 100pxの3つの座標を指定しています。最終的に指定した座標を結んだ三角形の表示領域がクリップパスとなります。

circle()

circle()は、円形を指定するための関数です。circle()の中には、半径と中心の座標を指定します。
以下の例では、半径が50pxで中心の座標が50% 50%の円形の表示領域がクリップパスとなります。

ellipse()

ellipse()は、楕円形を指定するための関数です。ellipse()の中には、x軸の半径とy軸の半径と中心の座標を指定します。

以下の例では、x軸の半径が50px、y軸の半径が100pxで中心の座標が50% 50%の楕円形の表示領域がクリップパスとなります。

inset()

inset()は、四角形を指定するための関数です。inset()の中には、上からの距離と右からの距離と下からの距離と左からの距離を指定します。

以下の例では、上から50px、右から50px、下から50px、左から50pxの四角形の表示領域がクリップパスとなります。

また、inset()は角丸の四角形を指定することもできます。inset()の中には、上からの距離と右からの距離と下からの距離と左からの距離と角丸の半径を指定します。

以下の例では、上から50px、右から50px、下から50px、左から50pxの四角形の表示領域がクリップパスとなります。

クリップパスの応用

クリップパスを使うとさまざまなアニメーションやデザインを作る上で重宝します。
以下にクリップパスを使った応用例をいくつか紹介します。

クリップパスを使ったアニメーション

クリップパスを使って、アニメーションを作成することもできます。
以下の例では、クリップパスと@keyframesを使って、円を徐々に大きくしています。

吹き出しも作れる

クリップパスを使って、吹き出しも作ることができます。

以下の例では、擬似要素を使って吹き出しを作成しています。
今まではborderを使って吹き出しを作成していた方も多いのではないでしょうか？
クリップパスを使うとより簡単に吹き出しを作成することができますね。

セクションの区切り線を作る

クリップパスを使って、セクションの区切り線を作ることもできます。
以下の例では、クリップパスを使って、セクションの区切り線を作成しています。