클립 경로를 사용하여 상단이 투명한 곡선형 div를 어떻게 만들 수 있나요?

투명 상단이 있는 곡선형 Div 만들기

전체 너비에 걸쳐 있고 높이가 약 500px의 경우 곡선 모양을 만드는 데 어려움을 겪었습니다. 제공된 이미지에 설명된 대로 원하는 모양을 얻으려면 다음 접근 방식을 활용하세요.

클립 경로 사용:

상단 또는 하단 요소에 클립 경로를 구현합니다. 다음과 같이 겹치는지 확인하세요.

.first,
.second {
  display: inline-block;
  margin: 5px;
}

.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

.second .top {
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.second .bottom {
  clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

<div class="first">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

<div class="second">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

위 내용은 클립 경로를 사용하여 상단이 투명한 곡선형 div를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!