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

Here is my solution to add shadow and gradient to the shape

.design {
  background: #ea053a;
  display: inline-block;
  height: 155px;
  margin-left: 33px;
  margin-right: 40px;
  position: relative;
  width: 228px;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.8));
 
}

.triangle {
  position: absolute;
  height: 100px;
  top: 155px;
  width: 228px;
  -webkit-clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
  clip-path: polygon(49% 44%, 0% 100%, 100% 100%);
  background-color: #ea053a;
  transform: rotate(180deg);
  
}