CSS만 사용하여 매끄러운 반원 컷아웃을 어떻게 만들 수 있나요?

CSS를 사용하여 매끄럽고 투명한 컷아웃 만들기

CSS3만 사용하여 div에서 투명한 컷아웃 모양을 얻는 것은 어려울 수 있습니다. 특히 도형은 단순한 기하학적 도형이 아닙니다. 이 기사에서는 ::after 의사 속성을 사용하여 매끄러운 반원 컷아웃을 생성하여 모든 요소가 검은색 또는 투명하게 유지되도록 하는 솔루션을 제시합니다.

이 접근 방식에는 투명한 원이 위에 배치된 검은색 직사각형을 만드는 것이 포함됩니다. 그것. 그러나 원하는 컷아웃 효과를 얻으려면 원의 경계를 넘어 확장되는 투명한 반경이 필요합니다. 이는 큰 테두리가 있는 ::after 의사 요소를 사용하여 반원 모양을 생성함으로써 달성됩니다.

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 100px;
  height: 50px;
  top: -50px;
  left: 0;
  overflow: hidden;
  position: absolute;
}

.circle::after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -100px;
  left: -40px;
  border: 40px solid rgba(0, 0, 0, 0.5);
}

이 코드는 위쪽 절반에 투명한 반원 컷아웃이 있는 검은색 직사각형을 만듭니다. ::after 의사 요소는 직사각형 위에 투명한 원을 배치하고 넓은 검정색 테두리를 적용하여 둥근 모양을 만듭니다. ::after 요소의 투명한 배경을 사용하면 직사각형의 색상과 주변 배경이 비쳐 보여 매끄러운 컷아웃 효과를 얻을 수 있습니다.

위 내용은 CSS만 사용하여 매끄러운 반원 컷아웃을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!