How can I correctly add a shadow and a gradient to my triangular shape?

Question

I want to make the following design:

I tried with :after and :before but it does not work. Here’s my current code:

Answer 1

You can use clip-path as I did. Here is my solution.

.design {
  background: #ea053a;
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
  clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
  height: 155px;
  width: 155px;
}

.month {
  text-align:center;
  padding: 1rem 0 .25rem 0;
  color:#fff;
  font-weight:bold;
  font-size: 18px;
}

.day {
  text-align: center;
  font-size: 60px;
  font-weight:bold;
  color: #fff;
}

  
Diciembre
  
29