• RSS

[CSS]半円を表示する方法(半円上、半円下、半円左、半円右)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

CSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。

正円

まず、border-radiusにより正円を作ります。これが半円を作っていく上での基本形となります。



半円上

上の正円をベースに、まずは下半分が欠けた半円(半円上)から順番にコードを見ていきます。

ポイントは、先程も触れた「border-radius」の値「width」と「height」の値の比率です。


半円上の場合、正円と比べて高さが半分になるので、widthとheightの値の比率2:1になります。また、border-radiusは左上と右上の値が100px。右下と左下を表示しないために0を指定します。


半円下

半円下は半円上のときと同じ考えで、widthとheightの値の比率2:1はになりますが、border-radiusは左上と右上の値が0、右下と左下が100pxと逆の指定になります。



半円左

続いて、左右のどちらかが欠けた半円の表現です。

まずは半円左ですが、これもwidthとheightの値の比率、border-radiusの値の以下のように調整します。


今度はwidthとheightの値の比率1:2になります。border-radiusは表示しない方の角(右上、右下)の値を0に指定すればOKです。


半円右

最後に半円右です。半円左と同じ考えで、widthとheightの値の比率1:2、 border-radiusは右上、右下の値は100pxになります。



border-radiusをパーセンテージで指定する場合

上記の半円4つのborder-radiusは、いずれも値にpxを指定したものですが、もちろんパーセンテージで指定することも可能です。

しかしこの場合、border-radiusの水平方向の値と、垂直方向の値を別々に調整する必要があるので、少し厄介です。

半円上(パーセンテージ指定)



半円下(パーセンテージ指定)



半円左(パーセンテージ指定)



半円右(パーセンテージ指定)





  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す