如何創建：CSS 彩帶

學習如何使用 CSS 創建彩帶。

親自試一試

如何創建彩帶

第一步 - 添加 HTML：

在此例中，彩帶屬于 button 元素：

<button class="btn">A button for something cool <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 度，以創建一個彩帶的效果。彩帶的背景色和文本色也被設置為與按鈕不同的顏色，以增加視覺效果。