CSS clip-path 를 이용하여 이미지 자르기
css clip-path 속성을 사용하면 요소의 일부분을 잘라낼 수 있다.
영역 내부에 있는 요소는 표시되고 , 외부에 있는 부품은 숨겨진다.
https://bennettfeely.com/clippy/
clip-path를 손쉽게 만들 수 있는 사이트 이다. 사용법은 아래와 같이 원하는 모양을 만들어 코드로 옮긴다.
<html>
clip-path: polygon(100% 0, 100% 0, 100% 100%, 45% 100%);
</html>
hover 시 clip-path를 전체 100%로 지정하여 위 동영상과 같은 효과를 나타낼 수 있다.
<html>clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);</html>
Dreams don't run away It is always myself who runs away.