Eu quero fazer o seguinte design:

Tentei com:after e:before mas não funciona. Aqui está o meu código atual:

.design {
  background: #ea053a;
  display: inline-block;
  height: 155px;
  margin-left: 33px;
  margin-right: 40px;
  position: relative;
  width: 228px;
}

.design:before {
  border-top: 43px solid #ea053a;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  margin-right: 40px;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 55px;
  margin-top: 100px;
  width: 128px;
}

<div class="design"></div>

( fiddle)

Como posso deixá-lo igual ao design original e com as duas propriedades a segui

box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
background-image: linear-gradient(to bottom, #ea053a, #d0021b);