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

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

作り方

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

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

補足

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

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

おそまつ！