CSS Squircle ジェネレーター - 角丸正方形
CSS の境界線の半径を視覚的にデザインします。ピクセルまたはパーセント単位の 4 つの独立したコーナー スライダー、インスタント サークルと錠剤のリンクオールコーナー ショートカット、さらにランダム化された形状の有機ブロブ モードを備えています。
処理中...
0%
結果
このページでは、4 つの角すべてが 30% でリンクされた境界線半径ジェネレーターが開きます。これは、鋭い正方形と完全な円の間にある適度な丸みです。これは真の数学的なスクワクル (超楕円) ではありませんが、単一の CSS プロパティが取得できる最も近い値であり、ほとんどのデザイン システムがその外観を必要とするときに到達する値です。
この名前は、iOS で普及した丸みを帯びた正方形のアプリ アイコンに由来しています。各角に十分な曲線があり、柔らかく親しみやすい印象を与えますが、形状が丸く見えるほどではありません。アイコン タイル、カードのサムネイル、最新のアバター フレームはすべて、まさにその理由から、同じ大まかな範囲の半径に依存しています。
リンクされたスライダーを上に微調整すると、より柔らかく、円形の感触が得られ、下に微調整すると、より鮮明で、より正方形の感触になります。変更するたびに CSS ラインが更新され、曲線がアイコンまたはカードに適切だと感じたらすぐにコピーできます。