내 첫 번째 CSS 기사에 오신 것을 환영합니다. clip-path 속성에 대해 이야기할 것을 제안합니다. 이렇게 하면 여기에서 보게 될 많은 일을 할 수 있습니다.

그것은 우리가 여기서 보게 될 많은 것들을 여러분에게 가능하게 하는 것입니다.

빠른 프레젠테이션

clip-path 속성을 사용하면 마음에 드는 멋진 모양을 만들고 이미지, div, ...에서 추출할 수 있습니다.clip-path 내부의 콘텐츠는 표시되고 외부 콘텐츠는 숨겨집니다.
요소를 클리핑할 때 보이는 부분만 이벤트(클릭, 호버, ....)를 트리거하므로 정말 멋집니다.

예를 들어 아바타를 만들 수 있습니다.

#avatar {
  clip-path: circle(50%);
}

#star {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

모양을 만드는 방법?

이전 예제에서 모양을 만드는 두 가지 방법을 보았을 것입니다. 이를 수행하는 각 방법을 살펴보기 전에 좌표계를 살펴보겠습니다.

좌표계

이미지가 말보다 낫다:



보시다시피 원점은 요소의 왼쪽 상단 모서리에 있으며 x축은 오른쪽으로, y축은 아래로 향합니다.

Note: You can use every measurement unit. If you use %, the values are relative to the size of the element. Personally I find it better to use % because it will keep the right proportion in relation to the element.

원()

clip-path에 가능한 값 중 하나는 circle()입니다. 다음 구문을 사용하여 중심의 반경과 위치를 정의할 수 있습니다.

clip-path: circle(50px at 100px 100px);

Notes: The default position is at center.

타원()

ellipse() 덕분에 타원을 만드는 것도 가능합니다. x-반경과 y-반경을 정의해야 하며 중심 위치도 설정할 수 있습니다. 구문은 다음과 같습니다.

clip-path: ellipse(100px 50px at 0 0);

타원이 모든 요소 영역을 차지하도록 하려면 두 가지 특정 값에 액세스하여 더 쉽게 만들 수 있습니다.

closest-side : 중앙에서 가장 가까운 테두리까지 크기를 가져옵니다.

farthest-side : 중앙에서 가장 먼 테두리까지 크기를 가져옵니다.

삽입()

또 다른 가능성은 inset() 로 삽입 사각형을 정의하는 것입니다. margin 키워드(round와 동일한 형식)를 사용하여 요소 측면(border-radius과 동일한 형식) 및 둥근 모서리에서 오프셋을 정의할 수 있습니다.

다각형()

polygon()를 사용하면 정점 목록을 정의하여 모양을 만들 수 있습니다. 구문은 다음과 같습니다.

clip-path: polygon(
    33% 0,
    66% 0,
    100% 33%,
    100% 66%,
    66% 100%,
    33% 100%,
    0 66%,
    0 33%
  );

Note: Each couple represents a point.

Note: Firefox gives you a useful tools to edit in the browser the polygon value:

길()

값이 path()인 SVG 경로로 모양을 정의할 수도 있습니다.
SVG 경로를 구축하는 방법은 설명하지 않겠습니다. 거짓말을 하지 않기 때문에 오늘 아침 예제를 만들기 위해 곡선을 그리는 방법을 배웠습니다 ^^
하지만 SVG와 애니메이션으로 미친 짓을 할 수 있기 때문에 열심히 노력할 것 같습니다.
다음은 예입니다.

clip-path: path(
  "M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
);

전체 CSS를 사용하면 다음을 얻을 수 있습니다.

#heart {
  width: 100px;
  height: 200px;
  background-color: red;
  clip-path: path(
    "M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
  );
}

Note: Yep I agree, not so good but pretty satisfied. Don't be too hard with me please :)

Note: It's also possible to reference an SVG clipPath element with the url() value.

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="svgHeart">
      <path d="M 50 175 L 0 100 Q 25 50 50 100 Q 75 50 100 100"
            stroke="black" fill="red" />
    </clipPath>
  </defs>
</svg>

<div id="heart"></div>

#heart {
  width: 100px;
  height: 200px;
  background-color: red;
  clip-path: url(#svgHeart);
}

몇 가지 예

이제 이론을 알았으니 이론으로 할 수 있는 몇 가지 예를 살펴보겠습니다.

크리스마스 트리

곧 크리스마스가 다가오니 선물을 놓을 크리스마스 트리를 만들어 봅시다.

이행

다음은 애니메이션과 결합할 때 수행할 수 있는 작업의 예입니다.

결론

그래서 나는 당신이 clip-path에 대한 이 CSS 기사를 좋아하고 그것이 당신에게 줄 수 있는 힘을 보기를 바랍니다.
모양에 대한 참조 상자를 정의할 수 있는 기능(기본적으로 border-box )에 대해서는 언급하지 않기로 결정했습니다. 현재로서는 Firefox만이 이 새로운 기능을 관리하기 때문입니다.


망설이지 말고 댓글을 달아주세요. 더 보고 싶다면 저를 팔로우하거나 제 Website로 가세요 .