超普通丝带css

Question

有人有过类似的经验吗？在这里我尝试了 box-shadow，但结果与图像不相似。谢谢

.ribbon{
width: 30px;
height: 60px;
background:#ebebeb;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 10px;
font-size: 30px;
font-weight: 600;
box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.4);
}

<div class="ribbon">4</div>

Answer 1

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

.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;
}

<div class="ribbon">4</div>

Answer 2

尝试使用一个具有渐变背景和模糊的伪类

.ribbon{
width: 30px;
height: 60px;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 10px;
font-size: 30px;
font-weight: 600;
border-radius: 0 0 5px 5px;
position:relative;
background: linear-gradient(to bottom, #f7f7f7, #ebebeb);
}

.ribbon:after{
content:'';
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
border-radius: 0 0 5px 5px;
background: linear-gradient(to bottom, #fff, #666);
position:absolute;
width: 34px;
height: 62px;
z-index:-1;
bottom:-2px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

<div class="ribbon">4</div>

超普通丝带css

Extra ordinary ribbon css

html

css

css-shapes