clip-pathプロパティ
clip-path CSS プロパティは要素のどの部分を表示するかを定義するクリッピング領域を作ります。クリッピング領域の内側が表示され、外側は隠されます。クリッピング領域はインラインや外部 SVG を参照する URL、または circle() のようなシェイプとして指定されたパスです。
photoshopなどの画像制作ツールを使わずに画像などをクリッピング出来る「clip-path」プロパティ。filterプロパティ同様、cssで画像を加工出来るので、複数の画像を用意する必要が無くなり、bodyの幅によって画像の形を変える事も出来ます。
「clip-path」プロパティは便利でメリットも多いですが、一部ブラウザーではまだ対応していないので、注意が必要です。
「clip-path」プロパティとアニメーションを組み合わせる事で色々な表現が出来るようになります。
「clip-path」プロパティ
inset() … 内側へのオフセット（通常は長方形となる）
circle() … 円
ellipse() … 楕円
polygon() … 多角形
clip-path: circle(50% at 50% 50%);
複雑な形の場合、「clip-path」プロパティを頭の中で考えて数値にしていくのは大変なので、こういった便利なジェネレーターを使いましょう。
Clippy — CSS clip-path maker
