clip-path를 사용하여 CSS에서 요소를 자르는 방법

저는 클립 경로 개념을 실제로 배운 적이 없으며 이 기사는 그러한 습관의 변화입니다.
CSS로 멋진 모양을 만들기 위해 CSS clip-path 속성을 학습하는 과정을 거치겠습니다.

좀 더 배경을 알려드리자면, 예전에 CSS 작업을 할 때 요소를 오버레이하고 그 위에 있는 다른 도형 사이에 숨겨서 많은 모양을 만들었습니다.
clip-path 속성이 존재했지만 그 당시에는 대규모 지원이 없었습니다.

즉, 물론 변경되었지만 내 습관은 변경되지 않았으므로 CSS 클립 경로 속성을 탐색하여 내 두뇌 🧠를 새로 고치자.

클립 경로를 사용한 기본 클리핑 이해

먼저 클리핑의 중심 개념을 살펴보겠습니다.
200 x 200 픽셀이고 배경이 있는 샘플 상자를 정의하여 시작하겠습니다.



아직 미친 것은 없지만 믹스에 클립 경로를 추가하면 어떤 일이 발생하는지 봅시다.

상자 클래스에 클립 경로를 배치하고 상자 중앙에 원을 자르는 것으로 시작합니다.



클리핑된 조각을 덜 투명하게 만들어서 실제 클립 경로에는 원 비트만 표시되지만 클리핑이 무엇을 하는지 알 수 있습니다.
기존 항목 위에 마스킹됩니다.

당신의 모양 "클립 경로"

클립 경로로 사용할 수 있는 몇 가지 모양이 있습니다. 그것들과 그것들이 어떻게 작동하는지 살펴봅시다.

원

기본 예제에서 이미 본 원은 다음 구문과 함께 제공됩니다.

circle(radius at posX posY)

기본 위치는 중앙이므로 다음과 같이 원을 사용할 수도 있습니다.

clip-path: circle(50%);

이것은 원이 상자의 절반이기 때문에 전체 상자를 채우는 원을 만듭니다.
그리고 기본적으로 중앙에 배치합니다.

그러나 다음과 같이 원을 상쇄할 수 있습니다.

clip-path: circle(50% at 70% 20%);

그러면 결과는 다음과 같습니다.



상자를 투명 요소로 추가하여 원에 의해 잘린 부분을 볼 수 있습니다.

타원

유사하게 작동하는 모양은 반지름 값이 두 개인 타원입니다.

ellipse(radiusX radiusY at posX posY)

상자를 자르는 데 사용하려면:

clip-path: ellipse(50% 25% at 50% 50%);

다음과 같은 모양이 됩니다.

삽입

또 다른 훌륭한 옵션은 인셋 값입니다. 상자 경계에서 삽입하는 데 사용할 수 있습니다.

기본적으로 다음과 같이 작동합니다.

inset(top right bottom left round roundX roundY)

어떤 일이 일어나는지 보여주기 위해 매우 극단적인 문제를 시도해 보겠습니다.

clip-path: inset(10px 20px 30px 40px round 15px 50px);

결과적으로 다음과 같은 모양이 됩니다.

다각형

마지막은 매우 다재다능합니다. 다각형이라고 하며 x/y 좌표 쌍을 허용합니다.
이것으로 인상적인 모양을 만들 수 있습니다.

기본 속성은 다음과 같이 작동합니다.

polygon(x1 y1, x2 y2, etc)

별 모양을 만들고 어떻게 작동하는지 봅시다.

clip-path: polygon(
  50% 0%,
  61% 35%,
  98% 35%,
  68% 57%,
  79% 91%,
  50% 70%,
  21% 91%,
  32% 57%,
  2% 35%,
  39% 35%
);

다음과 같은 별 모양이 됩니다.

SVG 경로

사용할 수 있는 마지막 리소스는 SVG 경로입니다. 네, 맞습니다.

어떻게 작동하는지 봅시다.

먼저 SVG clip path 정의가 있는 HTML 리소스가 필요합니다.

<svg class="svg">
  <clipPath id="triangle" clipPathUnits="objectBoundingBox">
    <path d="M0.05,0.05 h1 v1"></path>
  </clipPath>
</svg>

clip-path: url(#triangle);

결과적으로 다음과 같은 모양이 됩니다.

클립 경로 애니메이션

우리가 할 수 있는 또 다른 멋진 일은 클립 경로에 애니메이션을 적용하는 것입니다.

이것을 사용하여 클립 경로에 애니메이션을 적용할 수 있지만 호환되는 모양인지 확인하십시오.
예를 들어 폴리곤을 사용할 때 의미는 애니메이션을 적용할 동일한 양의 점을 유지하는 것입니다.

@keyframes move {
  0% {
    clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
  }
  50% {
    clip-path: polygon(
      50% 50%,
      50% 25%,
      50% 50%,
      75% 50%,
      50% 50%,
      50% 75%,
      50% 50%,
      25% 50%
    );
  }
  100% {
    clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
  }
}

이 애니메이션과 이 Codepen에서 설명된 다른 모든 속성을 사용해 볼 수 있습니다.

더 많은 리소스

이 기사를 읽어 주셔서 감사합니다. CSS의 클립 경로에 대해 새로운 것을 배웠기를 바랍니다.

이것에 대해 더 알고 싶다면 이 환상적인 리소스를 확인하십시오.

Clippy to make clip-paths

TryShape by Tapas

MDN Clip-path docs

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나