工夫のあるUIがいい！CSSで円・楕円・多角形などのクリップパスが簡単に作成できるオンラインサービス -Clippy

Post on:2015年1月7日

sponsors

CSSの「clip-path」を使い、円・楕円・多角形などのさまざまな形状のクリップパスが簡単に生成できるオンラインサービスを紹介します。

UIも随所に工夫がある非常に使いやすいデザインになっています。

使い方は簡単です。
まずは、背景になる画像（オリジナルも可）を選択します。

右サイドバーから、形状を選択。
このUIで「おっ！」と思う人も多いと思います。

形状一覧

あとは必要があれば、サイズや各ポイントを調整します。

サイズ調整

各ポイントのカラーはコードの値に対応しており、リアルタイムに変更を確認できます。
始動時に波紋のエフェクトが表示されるのいいですね。

完成したら、左下のエリアから「codepen」のアイコンをクリックすると、コードが生成されます。

codepenでコードと表示を確認

clip-pathのブラウザのサポート状況は、以下の通り。

IEは全滅って感じです。