CSS 방사형 그라데이션을 사용하여 측면이 둥근 투명한 곡선 모양을 만드는 방법은 무엇입니까?

양면이 둥근 CSS 투명한 곡선 모양

곡선의 투명한 모양을 만드는 것은 어려울 수 있으며, 특히 둥근 모양을 원할 경우 더욱 그렇습니다. 측면. 이 기사에서는 방사형 그라데이션을 사용한 솔루션을 살펴보겠습니다.

초기 시도

처음에는 절대 위치 지정과 곡선 테두리 반경. 그러나 배경은 여전히 ​​불투명하여 파란색 배경 색상이 비치는 것을 방지했습니다.

방사형 그라데이션을 사용한 솔루션

더 나은 솔루션은 방사형 그라데이션을 사용하여 생성하는 것입니다. 투명한 곡선 모양의 환상. 방사형 그라데이션을 사용하면 특정 지점에서 시작하여 바깥쪽으로 방사되는 그라데이션을 정의할 수 있습니다.

CSS:

.box {
  width: 200px;
  height: 100px;
  background: white;
}
.box .top {
  height: 100px;
  width: 150px;
  transform: translateY(-100%);
  background: #fff;
  position: relative;
}

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

.top:after {
  transform-origin: bottom;
  transform: scaleY(-1);
}

설명

.box 요소는 곡선 모양의 컨테이너 역할을 합니다. 그 안에서 .top 요소는 절대적인 위치에 배치되고 위쪽으로(-100%) 변환되어 모양을 만듭니다.

.top 요소에는 모양을 만드는 두 개의 의사 요소(::before 및 ::after)가 있습니다. 방사형 그라데이션을 사용한 곡선 효과. 이러한 의사 요소는 .top 요소의 왼쪽 상단 및 오른쪽 하단 모서리에 위치하며 너비는 50px입니다.

방사형 그라데이션은 왼쪽 상단과 하단에서 시작하도록 정의됩니다. 각각 오른쪽 모서리. 첫 번째 그라데이션은 오른쪽에 흰색(불투명) 섹션을 만들고 아래쪽 가장자리에서 2% 투명하게 페이드됩니다. 두 번째 그라데이션은 그 반대입니다. 왼쪽에는 투명한 부분이, 아래쪽에는 흰색 부분이 만들어집니다.

이러한 그라데이션을 결합하면 투명한 곡선 모양의 환상이 만들어집니다.

위 내용은 CSS 방사형 그라데이션을 사용하여 측면이 둥근 투명한 곡선 모양을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!