CSSのclip-pathプロパティを使うことで要素の表示範囲を定義するために使用されます。
要素の可視部分を特定の形状にクリップ（切り抜き）することが出来ます。
これにより、要素を円形、多角形、または画像の輪郭に沿って切り取ることが出来ます。
今回の記事ではそんなclip-pathプロパティのサンプルコードをまとめてみました。

この記事では以下のhtmlを切り抜いていきます。

<div class="clippath"></div>

.clippath{
    width: 320px;
    height: 240px;
    background-image: url(https://irodori-design-web.com/blog_image/2473/2473.jpg);
}

CSSのclip-pathで色んな図形に切り抜く

三角形に切り抜く

上向き

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右向き

clip-path: polygon(100% 50%, 0 0, 0 100%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

下向き

clip-path: polygon(50% 100%, 100% 0, 0 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左向き

clip-path: polygon(0 50%, 100% 100%, 100% 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

台形に切り抜く

上向き

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右向き

clip-path: polygon(100% 20%, 100% 80%, 0 100%, 0 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

下向き

clip-path: polygon(80% 100%, 20% 100%, 0 0, 100% 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左向き

clip-path: polygon(0 80%, 0 20%, 100% 0, 100% 100%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

平行四辺形に切り抜く

右上から左下（パターン1）

clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右上から左下（パターン2）

clip-path: polygon(100% 0, 100% 75%, 0 100%, 0 25%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左上から右下（パターン1）

clip-path: polygon(100% 25%, 100% 100%, 0 75%, 0 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左上から右下（パターン2）

clip-path: polygon(100% 100%, 25% 100%, 0 0, 75% 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

五角形に切り抜く

上向き

clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右向き

clip-path: polygon(100% 50%, 62% 100%, 0 82%, 0 18%, 62% 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

下向き

clip-path: polygon(50% 100%, 100% 62%, 82% 0, 18% 0, 0 62%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

左向き

clip-path: polygon(0 51%, 38% 100%, 100% 82%, 100% 18%, 38% 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

六角形に切り抜く

上向き

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

横向き

clip-path: polygon(100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%, 50% 0);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

ひし形（ダイヤ）に切り抜く

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

丸型に切り抜く

clip-path: circle(40% at 50% 50%);

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

clip-pathジェネレーターで簡単に切り抜き図形を作成

「Clippy」はclip-pathプロパティで切り抜く形を作る際、便利なツールです。
画面を確認しながら、リアルタイムでその内容が反映されるため、切り抜きたい形を簡単に作ることが出来ます。
また、今回ご紹介した基本的な図形以外にも十字架や星型など多くの切り抜き型があらかじめ用意されています。

https://bennettfeely.com/clippy/

まとめ

いかがでしたか？
clip-pathプロパティを使えばどんな形にも切り抜くことが出来ます。
これにより面白い表現を導入することも出来ますね。