CSSのclip-pathを簡単な操作で生成できるオンラインツール・「CSS clip-path Editor」

Ads

CSS clip-path Editor

CSS clip-path EditorCSSのclip-pathを簡単な操作で生成できるオンラインツールです。Codepenで公開されています。

基本的には既に用意されている形状を選択して利用する形ですが、ポリゴンタイプ(緑のドット)はポイントを増減させる事が出来ます。方法は別のポイントを選択して+キーを押せば隣に生成、-キーを押せばポイントが消えます。

ポイントはマウスでも動かせますが、選択して矢印キーでも移動できるようになっています。コードは下部に生成されます。

本ツールは前述通りCodepenで公開されているのでソースコードも確認する事が出来ます。

CSS clip-path Editor

タイトルとURLをコピーしました