가끔씩 웹사이트에서 막 반 씩 비스듬하게 잘려있는 배경 같은 거 보고 어떻게 하나 했는데
역시 css에도 해당 부분이 존재한다 !
Mozila에서 clip-path 에 대한 예제를 확인해봤는데 많지 않은 것이 문제
clip-path - CSS: Cascading Style Sheets | MDN
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
developer.mozilla.org
그래서 찾은 유용한 사이트가 있다
원하는 모양대로 점들을 움직이면 아래 코드가 나와 있어서 복붙하면 끗~!!!
Clippy — CSS clip-path maker
About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape
bennettfeely.com
이런 식으로 배경을 빨간색으로 주고 img 파일을 자를 수가 있다
'HTML, CSS' 카테고리의 다른 글
| ::after ::before content에 공백 넣고 싶을 때 (0) | 2023.05.25 |
|---|---|
| React img 이미지 태그 (0) | 2023.05.24 |
| [CSS] CSS calc() 사용법 (0) | 2023.02.26 |
| 자식 특정 요소 제외하고 CSS (0) | 2023.02.26 |
| [CSS] em과 rem 차이 (0) | 2023.02.26 |