CSS で傾いた半円を描画する方法は？

図（A)　のような、傾いた半円を　CSS　で描く方法が分かりません。

図（B)　のように、他の半円がおおいかぶさって下側になった半円を隠すことがないようにしなければなりません。

よろしくお願いいたします。

DIV box を用いて、傾いていない半円を作画した後に、script で回転させる方法は、傾きが何種類もあるため、できる限り使用せずに
純粋に CSS だけで半円の行列描画をしたいと考えています。

半円の大きさを動的に変化させなければならないため、できれば数式処理を行なえると助かるのではないかと思っています。

ありがとうございます。

Lhankor_Mhy

2022/04/25 03:27

「script で回転させる方法は、傾きが何種類もあるため、できる限り使用せず」とのことですが、CSSで回転させるのは問題ありませんか？

xmg

2022/04/25 04:10

CSSで回転する方法を教えていただければ幸いです

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことですか？

html
1	<div class="wrapper">
2		<div class="arc"></div>
3		<div class="arc"></div>
4	</div>

css
1		.wrapper {
2			width: 150px;
3			display: grid;
4			grid: auto / 50px 50px;
5			transform: rotate(-60deg);
6			transform-origin: top right;
7		}
8
9		.arc {
10			width: 100px;
11			height: 50px;
12			border: 1px solid;
13			border-radius: 0 0 50px 50px;
14			border-top: none;
15		}