普通碳带CSS

使用伪元素和一些转换来创建阴影。诀窍是旋转角度使顶部的宽度小于底部的宽度。

.ribbon {
  width: 30px;
  padding:25px 0 5px;
  text-align:center;
  font-size: 30px;
  font-weight: 600;
  position:relative;
  z-index:0; /* mandatory for the stacking context */
}
.ribbon:before,
.ribbon:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:0 0 5px 5px;
}
/* The shadow */
.ribbon:before {
  box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.5);
  transform:perspective(100px) rotateX(18deg);
  transform-origin:bottom;
}
/* The background */
.ribbon:after {
  background: #ebebeb;
}

4