はじめに
CSSで半円を描く方法をサンプルコード付き解説！ qumeru.com
をReact, Typescript, CodePenベースに書き直してみました。
実行例
See the Pen Untitled by kalz2q (@kalz2q) on CodePen.
感想
なぜこういう絵が描けるのかよくわからないのであとで追記します。
border-radius: 左上 右上 右下 左下;
今まで border-radius は % で指定すると思っていて、50% を指定すると円になるのを使っていたけれど、こうして px で指定すると書かれている図形を超えて指定できるので、半円が描ける。と言うことは 50% も calc(0px+50%) と書けば px 換算値になるかもしれない。
緑で描いた方の記法は四隅の縦と横を別々に指定する方法で複雑なのでわかりません。calc() を使った方が簡単で間違いが少なそうですね。
