CSSで角丸を美しく実装する方法、相対角丸のテクニック

角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか?
数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。

この外と内の角丸をバランスよく美しく、CSSで実装する相対角丸のテクニックを紹介します。

CSSで角丸を美しく実装する方法

Relative rounded corners
by Andy Bell

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

CSSで美しい角丸を実装する方法、相対角丸

角丸は非常に人気が高いデザインです。しかし、外側と内側に同じ値の角丸があると、違和感があり、少し奇妙に感じます。

違和感を感じる角丸

外側と内側に同じ値の角丸

この角丸に違和感を感じる理由は、値が同じ(たとえば、20px)であっても、それぞれの角丸の中心点が異なるからです。同じ値であっても、内側の半径は少し大きく見え、不格好になります。

幸いなことに、この問題は簡単な数式を使えば簡単に解決します。

P + R = RO

各変数は、

  • P: 内と外の半径間のパディング(スペース)
  • R: 内側半径
  • RO: 計算された外側半径

これで外側の角丸も内側の角丸も同じ中心点になります。

P + R = RO

外側の半径 = 内と外の半径間のスペース + 内側の半径

この数式を使用すると、パーフェクトな相対角丸が得られます。

それではHTMLとCSSでこれを実装してみましょう。
まずは、HTMLから。

Rは内側のmatched-radius__inner要素の半径で、ROは外側のmatched-radius要素の半径になります。Pはmatched-radiuspadding値になります。

CSSは、外側の要素から始めます。

内側の半径のサイズとパディング用に、2つのカスタムプロパティがあります。これを設定しておくと、外側の半径をcalc()で算出できます。

つづいて、内側の要素のCSSです。

これだけです!
これら数行のCSSで、角丸を常に美しく見えるように実装できます。さらに、このCSSはユーティリティとして利用できるので、必要なときに必要な場所で使用できます。

すべてのCSSは、下記の通りです。コピペで簡単に使用できます。

元記事には、パディングと半径を調整して数式が機能するか確認できるデモもあります。

数式が機能するか確認できるデモ

キャプチャ画像、元記事では動きます。

この小さなデザインのヒントをお読みいただき、ありがとうございます。

sponsors

top of page

©2024 coliss