멋진 호버 효과로 간단한 리본 모양 만들기

멋진 호버 효과로 간단한 리본 모양 만들기 단 하나의 요소 CSS 변수로 최적화됨 @property 제공 @property --a { syntax: ""; initial-value: 0deg; inherits: true; } .ribbon { --c: #60b0a7; --r: .8em; --a: 0deg; /* this will get animated */ --d: .5em; padding-inline: .3em; margin: calc(.5lh + var(--r)) calc(1.2lh + var(--d)); background: var(--c); position: relative; transition: --a .6s; } .ribbon:hover { --a: 60deg; } .ribbon:before,..

원문링크 : 멋진 호버 효과로 간단한 리본 모양 만들기