CODEWITHSUNDEEP
htmlcsscss-shapes
Khujand Nanocoding
Khujand Nanocoding

Reputation: 125

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>

Upvotes: 3

Views: 129

Answers (2)

Temani Afif
Temani Afif

Reputation: 273010

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>

Upvotes: 5

red
red

Reputation: 1619

try with one pseudoclass with gradient background and blur

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

Upvotes: 3

Related Questions