CSS 의사 요소를 사용하여 위쪽 곡선 배경을 만드는 방법은 무엇입니까?

의사 요소가 있는 위쪽 곡선 배경

상단에 미묘한 곡선 컷아웃이 있는 배경 이미지를 향상하려면 CSS 의사의 기능을 활용하세요. 강요. 문제는 컷아웃을 적절하게 배치하여 원하는 위치에서 배경과 겹치도록 하는 것입니다. 원본 코드를 수정하면 다음과 같은 효과를 얻을 수 있습니다.

<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>

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