다시 작성된 제목은 다음과 같습니다. CSS 3 모양: "Reverse Circle" 또는 "Cut Circle"

Question

"반원"이라고 설명할 수 있는 모양을 만들고 싶습니다.

검은색 선이 div 요소의 외부 테두리를 따라 이어져야 하기 때문에 이 이미지는 다소 부정확합니다.

현재 가지고 있는 데모는 다음과 같습니다. http://jsfiddle.net/n9fTF/

이미지 없이 CSS를 사용할 수 있나요?

Answer 1

점을 얼마나 둥글게 만들고 싶은지 그림에서는 알 수 없지만 한 가지 가능성이 있습니다. http://jsfiddle.net/n9fTF/6/

점을 더 둥글게 만들어야 한다면 끝 부분에 원을 몇 개 배치하여 숟가락과 잘 섞이도록 해야 합니다.

Answer 2

업데이트: CSS3 방사형 배경 그라데이션 옵션

(지원하는 브라우저의 경우 - FF 및 Chrome에서 테스트됨 - IE10, Safari도 작동해야 함)

내 원래 답변의 "문제" 중 하나는 확실한 배경이 없는 상황이었습니다. 이 업데이트는 동일한 효과를 만들어 원과 역방향 컷아웃 사이에 투명한 "간격"을 허용합니다.

샘플 바이올린 보기.

CSS

으아악

원래 답변

z-indexing이 제대로 작동하도록 예상보다 더 많은 노력이 필요했지만(이것은 음수 z-indexes를 무시하는 것 같습니다), 이것은 깔끔하고 멋진 모습을 제공합니다(IE9, FF, Chrome 중간 테스트) :

HTML

으아악

CSS

으아악