css clip-path 코드 만들어주는 사이트
https://bennettfeely.com/clippy/
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
cf. 참고 clip-path hover
clip-path를 사용하면서 hover 효과로 clip-path가 다르게 들어가서
transition 효과를 주고 싶다면, 꼭지점의 갯수가 같게 들어가야하고
clip-path: none; 라고 쓰면 효과가 적용되지 않는다.
css 모서리 짜르기 예시
See the Pen CSS secret 12 모서리 자르기 by JIWON CHOI (@jiwonch) on CodePen.
'STYLESHEET > SCSS' 카테고리의 다른 글
| [SCSS] text-overflow - 넘치는 텍스트 표기 (0) | 2023.03.20 |
|---|---|
| [css] cursor (0) | 2023.03.13 |
| [SCSS] 기본설정 (0) | 2023.02.24 |
| display - flex영역 (0) | 2022.10.07 |
댓글