【CSS】ボックス要素をCSSだけでクリッピングできるのか？

Ｑ質問：ボックス要素をCSSだけでクリッピングできるのか？

Ａ回答：できます！

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

使用するのは「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」を利用すると捗ります。

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

Clippy — CSS clip-path maker

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