CSS Clip-path生成器 — 創造的な形状とマスク

CSS clip-pathは要素を任意の形状にクリップします。生成器で形状を視覚的に描いてclip-pathコードを即座に生成します。

Clip-path形状

circle()で円形。ellipse()で楕円。polygon()で多角形——三角形・ダイヤモンド・星型など。inset()は角丸の長方形。path()は最大の柔軟性を持つ自由なSVGパス形式。

斜めのセクション

polygon(0 0, 100% 0, 100% 85%, 0 100%)は下端が斜めのセクションを作ります。直線的な端より視覚的に興味深いヒーローセクションに人気です。overflow: hiddenと組み合わせできれいな端を実現します。

Clip-pathのアニメーション

同じ数の点があればclip-path形状はアニメーション可能です。長方形からダイヤモンドへのアニメーションでリビール効果が作れます。transition: clip-path 0.3s easeをボタンやカードのホバー効果に使用してください。