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

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

모든 요소가 검은색 또는 투명하게 유지되는 원하는 투명한 반원 모양을 얻으려면 , CSS ::after 의사 속성을 활용하는 기술을 사용할 수 있습니다.

비결은 검정색의 영리한 조합에 있습니다. 직사각형과 원. 직사각형은 검정색 배경을 제공하는 베이스 역할을 합니다. 그 위에 원은 오버플로 속성을 사용하여 완전히 그리고 부분적으로 숨겨집니다.

이 기술의 핵심은 원에 추가된 ::after 의사 요소입니다. 너비와 높이를 100px로 설정하면 완벽한 반원을 형성합니다. 40px 두께의 테두리가 적용되지만 배경은 투명하게 유지됩니다.

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