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

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

이 코드에서는 두 개의 :before 및 :after 의사 요소가 생성되어 형태를 이룹니다. 모양의 둥근 측면. 방사형 그라데이션을 사용하면 투명 영역과 불투명 영역 사이를 점진적으로 전환하여 곡선 모양의 환상을 만들 수 있습니다.

SVG를 사용하는 대체 솔루션

또는 다음을 수행할 수 있습니다. SVG(Scalable Vector Graphics)를 활용하여 곡선 모양을 정의합니다.

<svg width="200" height="100" viewbox="0 0 200 100">
  <defs>
    <mask></mask></defs></svg>

이 SVG 코드에서는 경로 도형을 생성하도록 정의되고 직사각형에 마스크가 적용되어 도형의 원하는 부분만 표시됩니다.

결론

CSS 방사형 그라데이션 활용 또는 SVG를 사용하면 두 개의 측면이 둥근 원하는 투명한 내부 곡선 모양을 얻을 수 있습니다. 이러한 접근 방식 중 선택은 선호하는 방법과 디자인의 복잡성에 따라 달라집니다.

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