Search code examples
htmlcsscss-shapes

Extra ordinary ribbon css

anyone has exprience with stuff like that?. Here i've tried with box-shadow, but result not similar with image. Thanks.

enter image description here

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

Solution

  • Create the shadow using a pseudo element and some transformation. The trick is to rotate with a perpective to make the width of the top part smaller than the bottom.

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