투명한 반원 컷아웃이 있는 Div

Question

CSS3만을 사용하여 투명하게 잘려진 반원 모양을 만들고 싶습니다. 유일한 요구 사항은 모양을 형성하는 모든 요소 가 검정색이거나 투명해야 한다는 것 입니다.

나는 흰색 원이 있는 검은색 직사각형 을 사용할 수 없습니다. 왜냐하면 반원은 투명해야 하고 배경이 비치도록 해야 하기 때문입니다.

필수 모양:

Answer 1

상자 그림자를 사용하여 투명한 컷아웃 원을 만들 수 있습니다.

으아악 으아악

길이 비율은 반응형일 수 있습니다.

으아악 으아악

Answer 2

아마도 다음과 같은 CSS ::after 의사 속성을 사용하여 이 작업을 수행할 수 있습니다.

으아아아 으아아아