どうも7noteです。今回は半円の作り方

正円や楕円形はよく使われるので情報が多いのですが、
意外と使われない半円の作り方を紹介。

作り方

div{width:200px;/* 直径の長さ */height:100px;　　　　　/* 半径の長さ */border-top:100pxsolid#000;/* 半径の長さ */border-radius:100%;/* 角丸100%を指定 */}

これだけで、半円を作れます。

補足

上半分にする時はborder-top。下半分のときはborder-bottom。
このときはheightを半径の長さにしてください。

逆に左右に作るときはwidthを半径の長さにして、heightを直径の長さに指定します。
transformも使うと、回転できるので好きな角度の半円を作れますね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ