境界半径ジェネレータ

border-radius CSS宣言を迅速に生成するためのborder-radius CSSジェネレータツール。

Preview

Preview image

CSS 出力

clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

クリップパスコントロール

基本形状

シェイプのプロパティ

0%
0%
100%
100%

Animation

0s

Presets

Rectangle

Circle

Ellipse

Triangle

Diamond

Pentagon

Hexagon

Heart

使用方法

基本コントロール

  • 形状選択パネルから基本形状を選択します
  • 範囲スライダーを使用して形状パラメータを調整する
  • プレビュー上のコントロールポイントをドラッグして、クリップパスの形状を変更します
  • ポイントの追加モードを使用してカスタム形状にポイントを追加する

高度な機能

  • プリセットを保存してロードし、お気に入りの形状にすばやくアクセス可能
  • クリップパスをカスタムのデュレーション、イージング、イテレーションでアニメーション化
  • 生成された CSS コードをコピーして、プロジェクトに貼り付けます
  • ダークモードを切り替えて、深夜に快適なデザインを実現

Related Tools