CSS3만 사용하여 Div에 투명한 반원 컷아웃을 만드는 방법은 무엇입니까?

CSS3을 사용하여 Div에 투명한 반원 컷아웃 만들기

CSS3만 사용하여 div 내에 투명한 반원 컷아웃을 구성하려면 , 모양을 형성하는 모든 요소의 배경색은 검은색 또는 투명하게 유지되어야 합니다. 이 요구 사항을 충족하는 기술에는 CSS의 ::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);
}

<div class="rect"><span class="circle"></span></div>

이 접근 방식은 직사각형을 만듭니다. 검정색 오버레이와 반투명 원이 있습니다. 원은 절대적으로 위치하여 투명한 컷아웃 모양을 만듭니다.

위 내용은 CSS3만 사용하여 Div에 투명한 반원 컷아웃을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!