CSS를 사용하여 배경 상단에 컷아웃 곡선을 배치하는 방법은 무엇입니까?

배경 위에 컷아웃 곡선을 배치하는 방법

목표는 제공된 CSS 코드를 수정하여 컷아웃 곡선( .top)을 오른쪽이 아닌 배경(.box) 상단에 배치하세요.

CSS 코드 설명:

원본 코드에서 .top 요소는 변환:translateY(-100%)를 사용하여 상위 .box를 기준으로 위치가 지정됩니다. 이렇게 하면 효과적으로 배경 아래에 배치됩니다.

곡선을 위로 이동하려면 다음을 수행해야 합니다.

1. .box 컨테이너의 여백 상단을 조정하여 그 위에 공간을 만듭니다. .
2. 의사 요소를 사용하여 .top 요소의 위치를 ​​변경하여 상단에 곡선을 만듭니다.

수정된 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;
}

작동 방식:

• 이제 .box 컨테이너의 여백 상단은 90px로, 그 위에 컷아웃 곡선을 위한 공간을 제공합니다.
• .top 요소가 제거되고 .box 컨테이너 아래에 두 개의 의사 요소가 생성됩니다.
• 이러한 의사 요소는 그라데이션을 사용하여 곡선 모양을 만듭니다.
• transform-origin:right 및 변환 :scaleX(-1)는 두 번째 의사 요소에서 곡선을 수평으로 뒤집는 데 사용됩니다.

이러한 변경 사항을 구현하면 이제 컷아웃 곡선이 원하는 대로 배경 위에 배치됩니다.

위 내용은 CSS를 사용하여 배경 상단에 컷아웃 곡선을 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!