CSSで多角形を描いてクリッピングしよう！【clip-pathプロパティ】

クリッピングとは？

切り抜きのことを「クリッピング」と言います。

今回紹介するCSSの「clip-path」を指定すると、指定した要素にクリッピング領域を作ることができ、領域の境界線から内側を表示して外側を切り抜くことができます。

基本の設定

clip-path: basic-shape():

clip-pathに使用できる関数の部分は「basic-shape」と言います。basic-shapeにはクリッピング領域をどのような形にするかを指定します。

clip-pathで指定できる値

指定できる値は以下のとおりです。

ぜひお好みで使ってみてくださいね！

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。