웹솔루션개발 22년 노하우! 해피CGI의 모든것

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

웹프로그램밍 자료실/기타 자료

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

해피CGI윤실장 2021. 4. 20. 09:27

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

 


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


[주요 CSS01 - 리본 몸통]

 



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

 



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

 

 

 

 


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

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

 

 

 

홈페이지바로가기

Comments