[CSS] clip-path 속성의 polygon 사용법을 알아보자

CSS 로 웹디자인을 하면서 아래와 같이 어떤 요소의 한 쪽 모서리가 잘려나간듯한 모양으로 만들고 싶었습니다.

우측 하단 모서리가 잘려나간 모양을 하고 있는 위젯 요소

그래서 이래저래 찾아보니, clip-path 속성을 이용하면 된다는 것을 알게 되었고, 그 사용법이 아주 조금은 복잡해 보일 수 있어 정리해 기록으로 남겨봅니다.

clip-path

CSS 의 clip-path 속성은 어떤 요소의 특정 부분을 클리핑, 즉, 잘라내어 사용자에게 보여주는 효과를 냅니다.

어떻게 잘라낼 지를 결정하기 위해 아래와 같은 값들을 사용할 수 있습니다.

• circle()
• ellipse()
• triangle()
• polygon()
• path
• inset

각 값들의 이름만 보면 대충 어떤 식으로 잘라낼지 알 수 있겠죠? 위에서 보여드린 우측 하단의 일부가 잘려나간 모양을 만들기 위해서는 polygon 을 이용해 값을 넣어주면 되더라구요.

polygon

clip-path 속성에서 polygon 을 이용해 값을 넣기 위해서는 아래의 내용을 알고 있을 필요가 있습니다.

• polygon() 에는 최소 3개 이상의 값 투입
• 각 값은 사각형을 기준으로 했을 때 좌측 상단 부터 시계 방향으로 존재하는 꼭지점의 좌표를 나타냄
• 각 값은 두 개 숫자의 페어로 이루어지는데, 첫 번째 숫자는 x축, 두 번째 숫자는 y축의 위치를 나타냄

자꾸 말로만 설명하려고 하니 머리 속이 복잡해지는데, 실제 위에서 보여드렸던 예제를 다시 한번 보시죠.

CSS – clip-path – polygon으로 만든 5각형

위에서 보셨던 이미지에 각 모서리 부분을 표시한 것입니다.

이와 같은 다각형을 구현하기 위해서는 아래와 같이 clip-path 에 polygon 을 이용하면 됩니다.

div { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 0 100%); }

polygon 에 숫자 두 개로 이루어진 페어가 총 5개 들어간 것이 보이죠? 가독성을 높히기 위해 아래와 같이 표현해 보겠습니다.

div { 
        clip-path: polygon(
            0 0, 
            100% 0, 
            100% calc(100% - 1rem), 
            calc(100% - 1rem) 100%, 
            0 100%
        ); 
}

쉽표로 구분된 5개의 페어가 명확히 구분되죠? 각 페어가 모서리의 좌표를 나타내는데 이를 정리하면 아래와 같습니다.

위 표와 각 모서리가 표시된 이미지를 비교하면서 보시면 어떤 내용인지 감을 잡을 수 있습니다.

각 좌표에 calc 를 이용할 수도 있다는 점에서 꽤 편리하다는 생각이 드네요.

주의사항

clip-path 를 이용할 때 딱 한 가지만 주의하면 되는데, 요소를 잘라냈을 때 잘라진 부분은 화면에 보이지 않는다는 점입니다.

당연히 그러려고 clip-path 를 사용한 것 아니냐? 라고 하실 수도 있겠지만, 해당 요소가 border 속성으로 테두리를 가지고 있다면, 그 테두리도 잘려나가 보이지 않는 다는 점이죠.

만약 요소의 일부분을 잘라내고 그 부분에도 테두리를 적용하고 싶다면, :before 또는 :after 선택자를 이용해 가상의 요소를 만들어서 적절하게 표시하는 방법을 이용해야 할 것입니다.

더욱 자세한 내용은 아래 외부링크의 페이지를 확인하세요.

끝.

외부링크

• clip-path, mdn web docs
• CSS clip-path Property, w3schools
• CSS clip-path maker, Clippy – Bennett Feely: clip-path 연습장