如何创建：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 度，以创建一个彩带的效果。彩带的背景色和文本色也被设置为与按钮不同的颜色，以增加视觉效果。