CSSで多角形や楕円形のクリップパスを生成してくれるWEBサービス「Clippy」

CSSで多角形や楕円形のクリップパスを生成してくれるWEBサービス「Clippy」

CSSで多角形や楕円形のクリップパスを生成してくれるWEBサービス「Clippy」

Clippyは、多角形や楕円形のクリップパスを簡単に生成することができるWEBサービスです。

非常にわかりやすく設計されているため、直感的に操作することができます。

Clippyの使い方

Clippyにアクセスして、右側から作成したい図形を選択します。

図形の選択

Demo SizeやDemo Backgroundから、サイズや背景画像が変更できます。

サイズや背景画像の変更

角の点をドラッグすることで、形を調整することも可能です。

形の調整

調整が完了したら、下部にあるCODEPENのボタンをクリックします。

CSSの生成

CODEPENの画面が開き、コードとプレビューが表示されます。

CODEPEN

以下のようなCSSが生成されますので、コピーして利用します。


div {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(39% 0, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(39% 0, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* Center the demo */
html, body { height: 100%; }
body {
display: flex;
justify-content: center;
align-items: center;
}

あとがき

操作が非常に簡単で良いですね。画像などをCSSで特殊な形に切り抜きたい時は、ぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です