CSS를 사용하여 컷아웃 상단을 곡선 상단 배경으로 어떻게 변환할 수 있나요?

컷아웃 상단을 곡선 상단 배경으로 변환

이 코드 기반 작업에서는 블록 오른쪽에 위치한 컷아웃을 블록 위에 우아하게 앉아 있는 곡선 모양.

현재 코드 조각에는 .top 요소가 포함된 .box가 포함되어 있습니다. 원하는 효과는 컷아웃을 맨 위에 두는 것이지만 코드에서는 컷아웃을 오른쪽에 배치합니다. 이제 수정된 버전을 살펴보겠습니다.

<code class="css">.box {
  margin-top: 90px;
  width: 200px;
  height: 100px;
  background: white;
  position: relative;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 50%;
  left: 0;
  height: 80px;
  background:
    radial-gradient(50% 100% at bottom left, #fff 98%, #0000) top,
    radial-gradient(50% 100% at top right, #0000 98%, #fff) bottom;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

.box:after {
  transform-origin: right;
  transform: scaleX(-1);
}

body {
  background: pink;
}</code>

주요 조정:

• 최소한 일치하도록 .box의 margin-top을 설정했습니다. 컷아웃이 블록과 겹치지 않도록 의사 요소의 높이.
• 이제 의사 요소는 하단: 100%를 사용하여 .box의 하단에 배치됩니다.
• 의사 요소의 높이는 80px로 설정되어 있으며 이를 조정하여 곡선의 높이를 제어할 수 있습니다.
• 원하는 방사형 효과를 생성하도록 배경 그라데이션이 수정되었습니다.

짜잔! 이제 블록 상단에서 매끄럽게 흐르는 곡선 컷아웃이 생겼습니다. 자유롭게 더 많은 실험을 해보고 디자인에 완벽하게 어울리는 곡선을 만들어 보세요.

위 내용은 CSS를 사용하여 컷아웃 상단을 곡선 상단 배경으로 어떻게 변환할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!