最終更新日が2023年以前の記事です。レイアウト変更のため、正常に表示されない場合があります。
領域やボタンなどの作成でよくお世話になる角丸プロパティ、border-radius。上手く利用して、レスポンシブ対応できる思い通りの形を作りましょう。思ってたより自由自在です。
楕円、カプセル型の描画
以下の２つはdivタグで作られた領域です。それぞれどうやって作るでしょうか？
特にカプセル型はボタンをデザインする上でしばしば出てくる形です。
楕円
カプセル型
border-radius の性質について確認しましょう。
px, em単位で指定すると、半径は指定した長さで描画されます。
一方、パーセンテージで指定すると、半径はx軸、y軸それぞれに対するパーセンテージを使って描画されます。たとえば、width: 200px; height: 100px; の要素に対して border-radius: 20%; を指定すると、角丸の半径は横40px,タテ20pxの楕円形になるということです。
ですので、楕円はborder-radius: 50%; を指定することで作れます。
では、カプセル型はどうでしょうか。要素の短辺(height)の長さを取得してそれをもとに指定する……のようなことを考えたくなりますが、基本的にCSSでは要素の大きさを取得することはできません。
ここで、border-radiusに関するもう一つの性質を利用します。
角丸が隣の角丸とオーバーラップしてしまう場合、オーバーラップしない最大の大きさまで自動で縮小されます。つまり、雑にborder-radius: 999999px;とでもしておけば、自動で短辺の大きさまで縮小され、カプセル型が描画できるというわけです。コードとして美しくはないかもしれませんが、実用上はこれで問題ありません。
応用して様々な形を描画する
４隅の半径を個別指定する
サンプル
border-radius: 200px 800px 200px 800px;margin や padding などを設定する時と同様、スペースで区切ればそれぞれ個別指定が可能です。順番は[左上→右上→右下→左下]の順です。
x軸とy軸で異なる半径を指定する
サンプル
border-radius:50%/20px;スラッシュで区切ることで、width/heightの順で個別に半径を指定できます。
組み合わせて自在な形を作る
サンプル
サンプル
border-radius:40% 60% 20% 80%/40% 80% 20% 60%;ぷにぷにの図形を自在に描画することだって可能です。
