css 制作丝带

使用 CSS 制作丝带效果

通过 CSS 可以创建多种丝带效果，以下是几种常见的方法：

基础丝带效果

通过伪元素和旋转变换实现简单的丝带形状：

.ribbon {
  width: 100px;
  height: 30px;
  background-color: #f00;
  position: relative;
  margin: 50px;
}

.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.ribbon::before {
  top: -10px;
  left: -10px;
  border-width: 10px 10px 0 0;
  border-color: #c00 transparent transparent transparent;
}

.ribbon::after {
  bottom: -10px;
  right: -10px;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent #c00 transparent;
}

飘带效果

创建具有波浪边缘的丝带：

.ribbon-wave {
  width: 200px;
  height: 40px;
  background: #ff6b6b;
  position: relative;
  margin: 50px;
}

.ribbon-wave::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 20px;
  height: 100%;
  background: #ff8e8e;
  border-radius: 10px 0 0 10px;
}

.ribbon-wave::after {
  content: '';
  position: absolute;
  top: 0;
  right: -10px;
  width: 20px;
  height: 100%;
  background: #ff8e8e;
  border-radius: 0 10px 10px 0;
}

3D 丝带效果

添加阴影和渐变创建立体感：

.ribbon-3d {
  width: 150px;
  height: 35px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  position: relative;
  margin: 50px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  color: white;
  text-align: center;
  line-height: 35px;
  font-weight: bold;
}

.ribbon-3d::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(135deg, #ff8e8e 0%, #ff6b6b 100%);
}

斜角丝带

创建有斜切边缘的丝带：

.ribbon-angle {
  width: 180px;
  height: 40px;
  background: #4ecdc4;
  position: relative;
  margin: 50px;
  color: white;
  text-align: center;
  line-height: 40px;
}

.ribbon-angle::before {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-left: 20px solid #4ecdc4;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

这些 CSS 丝带效果可以通过调整颜色、尺寸和形状参数来自定义外观。更复杂的效果可以结合 CSS 动画或 SVG 实现。