透明な半円の切り抜きのある Div

Question

CSS3だけで半円の透明な切り抜きを作りたいです。唯一の要件は、形状 を形成するすべての要素 が黒または透明な であることです。

I では、半円が透明で背景が透けて見える必要があるため、白い円が描かれた黒い長方形は使用できません。

必要な形状:

Answer 1

ボックス シャドウを使用して 透明なクリッピング サークルを作成できます :

リーリー リーリー

これは、パーセンテージの長さで レスポンシブ にすることができます:

リーリー リーリー

Answer 2

おそらく、次のような CSS ::after 疑似プロパティを使用してこれを行うことができます:

リーリー リーリー