요소의 일부분 잘라내기 : CSS 의 clip-path 속성

< 참고 자료 >

 

developer.mozilla.org/ko/docs/Web/CSS/clip-path

stackoverflow.com/questions/7324722/cut-corners-using-css

https://css-tricks.com/almanac/properties/c/clip-path/

codepen.io/stoumann/pen/abZxoOM

css-tricks.com/animating-with-clip-path/

---

CSS 의 clip-path 속성을 정의하게되면, 

요소의 일부분을 잘라낼수있다.

div {

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

}

이 clip-path 로 잘린 부분은 당연히 event 리스너가 작동하지않는다.

 

하지만 위의 polygon path 를 수동으로 찾는것은 매우 괴로운일이다.

이걸 편하게 마우스로 드래그해서 생성해주는 사이트가 있다.

https://bennettfeely.com/clippy/