Собственно, подскажите пожалуйста, как сверстать такой элемент, чтобы он был с тенью?
Я пытался делать вот так,
.box {
width: 300px;
height: 70px;
background-color: #a6202e;
position: relative;
}
.box:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
bottom: -20px;
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-top: 20px solid #a6202e;
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.75);
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.75);
}
<div class="box">
</div>
но всё равно он не получается таким как на картинке, у меня углы острые и нет тени, а ещё на самом треугольнике есть бордер.
Очень надеюсь на помощь и советы. Может стрелку можно сделать другим способом, кроме бордера ?