CSS3 badge

Q 質問:ボックス要素をCSSだけでクリッピングできるのか?

A 回答:できます!

……というワケで、スタイルシートの記述だけでボックス要素をクリッピング(切り抜き表示)する方法を紹介します。

使用するのは「clip-path」プロパティ。
実はCSS2でも使えましたが、最新のCSS3ではかなり便利な使い方ができるようになっています。

例:円に切り抜く

.box {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}

例:菱形に切り抜く

.box {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

例:三角形に切り抜く

.box {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

上記は簡単な例。もちろん、もっと複雑にクリッピングすることも可能ですが、その際は簡単に使えるオンラインジェネレーター「Clippy」を利用すると捗ります。

CSS クリップ ジェネレーター

とても便利なオンラインの clip-path プロパティのジェネレーター。

Clippy — CSS clip-path maker

このオンラインツールを使えば面倒な計算が不要で、一瞬で必要なコードを生成してくれます。
ぜひ活用してください!