w3.css
CSS 리본
CSS로 리본을 만드는 방법을 알아보자.
리본을 만드는 방법
이 예에서 리본은 버튼 요소에 속한다.
1단계) HTML 추가
<button class="btn">A button for something cool <span class="ribbon">NEW</span></button>
2단계) CSS 추가
.btn { border: none; border-radius: 5px; padding: 12px 20px; font-size: 16px; cursor: pointer; background-color: #282A35; color: white; position: relative; } .ribbon { width: 60px; font-size: 14px; padding: 4px; position: absolute; right: -25px; top: -12px; text-align: center; border-radius: 25px; transform: rotate(20deg); background-color: #ff9800; color: white; }
기본 예시
예제 보기참고
W3C School - How TO - CSS Ribbon