¿Cómo puedo agregar correctamente una sombra y un degradado a mi forma?
Quiero hacer el siguiente diseño:
Intenté con:after
y:before
Pero no funciona. Aquí está mi código actual:
.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>
(violí)
¿Cómo podría dejarlo igual que el diseño original y con las siguientes dos propiedades?:
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
background-image: linear-gradient(to bottom, #ea053a, #d0021b);