CSS를 사용하여 측면이 둥근 투명한 곡선 모양을 어떻게 만들 수 있습니까?

CSS에서 측면이 둥근 투명한 곡선 모양 만들기

CSS에서 곡선 모양을 만드는 것은 어려울 수 있으며, 특히 투명성을 목표로 하는 경우 더욱 그렇습니다. 이 기사에서는 CSS를 사용하여 불투명 배경 문제를 해결하는 방법을 살펴봅니다.

과제:

원하는 시나리오에 직면할 수 있습니다. 제공된 이미지에 묘사된 것과 유사한 투명한 곡선 모양을 만듭니다. 그러나 기존 CSS 기술을 사용하는 현재 접근 방식에서는 결과 스크린샷에서 볼 수 있듯이 배경이 불투명해집니다.

해결책:

이 문제를 해결하기 위해 우리는 방사형 그라데이션과 관련된 솔루션입니다. 전략적으로 배치된 두 개의 방사형 그라데이션을 활용하여 측면이 둥근 투명한 곡선 모양의 환상을 만들 수 있습니다.

구현:

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}

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

.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);
}

body {
  background:pink;
}

이 코드 스니펫에서 에서 '.top' 요소는 곡선 모양을 나타냅니다. 이 요소 앞과 뒤에 위치한 방사형 그라데이션은 둥근 측면과 투명도를 만듭니다. 'transform: scaleY(-1)' 속성은 뒤의 의사 요소를 수직으로 뒤집어 대칭 모양을 만듭니다.

개선된 구현:

더 많은 사용자를 위한- 곡선을 조정하는 친숙한 방법을 알고 싶다면 https://css-shape.com/inner-curve/에서 제공하는 솔루션을 사용해 보세요. 이 웹사이트에서는 곡선 모양의 다양한 측면을 사용자 정의하여 원하는 효과를 쉽게 얻을 수 있습니다.

위 내용은 CSS를 사용하여 측면이 둥근 투명한 곡선 모양을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!