CSSで画像の角を斜めにトリミングする方法　～ジェネレーター紹介付き

本日は、CSSで画像の角を斜めにトリミングする方法を覚え書きとして記事にしようと思います。

具体的にどういうことがしたいのかというと、

このような形を、CSSで実現したいというものです。こちらは、Illustratorでクリッピングマスクを使用して実現したものです。

平行四辺形にトリミングするのともちょっと違う、角を落としたような感じの画像です。
こういう画像の使い方は、ちょっとしたサイトデザインのアクセントになるので好きなのですが、やり方を毎回「どうだったっけ？」となるので記事にしておきます。

clip-pathを使ってトリミングする

トリミングには、clip-pathを使用します。

clip-pathは、Illustratorで実行するクリッピングマスクと同様のことがCSSで行えるものです。

サンプルの画像は、点線で示された多角形で画像を切り抜いたものです。
同様に、CSSで多角形を指定し、その形で切り抜くことができるのがclip-pathになります。

こちらはIllustratorで加工した画像ではなく、元の長方形の画像をCSSで角を斜めにカットしたトリミングを適用したものになります。
（Illustratorの加工の際が適当だったので、ちょっと角度がずれてるのはご愛嬌）

使用しているCSSは、以下になります。

.clip-path {
clip-path: polygon(15% 0, 100% 0%, 100% 65%, 85% 100%, 0 100%, 0 35%);
}

polygonは「多角形での切り抜き」を指定します。

などが指定できます。

今回は、六角形で切り抜いていることになるので、clip-pathでその通りに切り抜きを指定したことになりますね。

clip-pathは、切り抜きの形によって値の書き方が微妙に違います。
わたしは多角形を活用することが多いですが、円形だとやっぱりたまに迷ったりします。

そういうときは、ジェネレーターを活用して値の書き方を確認して覚えるのが良いと思います。

感覚的にポインタを動かすだけで、どの値が変化するのか色などで教えてくれるので、とても分かりやすいです。

clip-pathはとても応用しやすく使いやすいのですが、ひとつ問題点があります。

例によって例のごとくIEには対応していません。

この世から駆逐されていく定めであるとは言え、まだまだ世の中に蔓延るIEを無視するわけにはいかない！という場合は、beforeとafterを使って三角形を画像に重ねる、という手段があるかと思います。
そのあたりで工夫して代替手段として使用する、といったところでしょうか。

IE以外のブラウザであれば、対応しているようです。