CSSだけで画像を様々な形にマスク(クリッピング)する方法

今回はCSSだけで画像をどんな形でも切り抜く方法を紹介します。

clipというプロパティを使います。

 

clipとは?

clipというプロパティはボックスを切り抜くプロパティです。

背景に画像を表示しておけば、clipを使って画像をCSSだけで切り抜けるというわけです。

clipは以下のように使用します。

.element {
    clip: rect(10px, 20px, 30px, 40px);
}

通常のCSSの指定通り上から時計回りに指定していきます。

 

clip-pathプロパティ

ただ、これよりも圧倒的に凄いのがclip-pathとういプロパティです。

このプロパティはどんな複雑な形にでも画像を切り抜くことができます。

例えば以下のように指定すると円形にクリッピングされます。

img.sample-img{
    width:300px;
    clip-path: circle(100px at center);
    -webkit-clip-path: circle(100px at center);
}

 

また、かなり複雑な形になると以下のようになります。

img.sample-img{
    width:300px;
    -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

 

実際に切り抜く時はジェネレーターを使おう

上みたいなコードをを人力で何とかするのはさすがに無理なので、複雑な形で切り抜く場合はジェネレーターを使うと便利です。

Clippy — CSS clip-path maker

 

上のサイトでは実際にどのような形で切り抜かれるかのリアルタイムで確認することができます。

操作も直感的にわかりやすく、切り抜く形のテンプレートも用意されています。

実際にclip-pathを使って画像を切り抜くなら間違いなく上のサイトを使うのが一番いいです。

 

また、ベンダーインプレックスは-webkit-のみでokです(多分)

コードはジェネレータにリアルタイムで出力されるので、それを見ながら好きな形に切り抜くといいでしょう。