리본을 어떻게 만드는가: CSS 리본

리본을 어떻게 만드는가

첫 번째 단계 - HTML 추가:

이 예제에서 리본은 button 요소에 속합니다:

<button class="btn">어떤 것에 대해 멋진 버튼 <span class="ribbon">NEW</span></button>

두 번째 단계 - 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;
}

직접 테스트해 보세요

예제 설명:

이 예제에서는 CSS가 버튼에 리본 효과를 추가하는 데 사용됩니다. 이 리본은 버튼 요소 내부에 특정 스타일을 가진 span 요소를 추가하여 구현됩니다. 이 span 요소는 버튼의 오른쪽 상단에 위치되어 있으며, 20도로 회전하여 리본 효과를 만듭니다. 리본의 배경색과 텍스트색도 버튼과 다른 색상으로 설정되어 시각적 효과를 높입니다.