CSS만 사용하여 투명한 반원 컷아웃을 어떻게 만들 수 있습니까?

CSS를 사용한 투명한 반원 컷아웃

검은색 직사각형과 흰색 원이 없어도 투명한 반원 만들기 가능 -CSS3만을 사용하여 원형 컷아웃. 핵심은 ::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);
}

이 코드에서 .ract 요소는 기본 모양을 나타내고 .circle과 해당 ::after 의사 요소는 함께 컷아웃을 형성합니다. . ::after 요소는 .circle 요소 뒤에 위치하는 반원 모양을 만들어 반원 컷아웃의 환상을 만듭니다. ::after 요소의 투명한 배경을 사용하면 배경색이 비쳐보일 수 있어 원하는 효과를 얻을 수 있습니다.

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