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

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);
}

HTML:

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

이 솔루션은 다음을 포함하는 정삼각형을 만듭니다. 교차점이 반원 모양을 이루도록 위쪽으로 눌려진 원입니다. 배경 속성을 검은색이나 투명으로 설정하면 원하는 효과를 얻을 수 있습니다.

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