[해피CGI][cgimall] css로 만드는 Corner Ribbon

이미지로 만들었던 리본을 css로 쉽게 만들어보세요.

 

transform:rotate 스타일를 사용하여 모서리에 감겨있는 리본을 만들어 보실 수 있습니다.


[주요 CSS01 - 리본 몸통]

 

[주요 CSS02 - 뒤로 넘어가는 리본 표현]

 

[주요 CSS03 - 위치에 따른 스타일]

 

 

 

 

위치에 따라 position 위치 와 넘겨지는 리본의 border-color값,
그리고 rotate값이 달리지는 것을 확인해보실 수 있습니다.

포토샵으로 이미지로만 제작했던 리본을 css를 이용하여 이미지 제작과정 없이 쉽게 제작해 보세요 ^^