CSS clip 속성

clip

• 이미지나 도형 등을 클립핑할 때 사용. IE8도 지원.
• 클리핑 효과를 주기 위해서는 속성을 부여하는 개체의 position 속성이 absolute여야 한다.
• clip 속성은 사각형을 통한 클리핑한 지원하나, 새로운 속성인 clip-path는 다양한 도형을 통한 클리핑을 지원 예정이라고 한다.
• rect가 받는 인자는 마스킹되는 영역을 정의하는 것으로 (top, right, bottom, left)로 정의된다.
• CSS만을 활용해서 도넛 그래프 등을 만들 때 유용하게 쓰일 수 있다.

img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}

clip-path

• IE12부터 지원하며, 사각형 외 다양한 도형으로 통한 클리핑 가능

참고자료

CSS clip property

CSS clip-path property

CSS Donut Charts