HTML:
<div class="arrow"></div>
<div class="line"></div>
CSS:
.arrow {
height: 0;
width: 0;
border-bottom: 8px solid #FF0000;
border-left: 16px dotted transparent;
border-right: 16px dotted transparent;
left: 0px;
top: 2px;
margin-left: 20px;
z-index: 1;
position: relative;
}
.line {
width: 200px;
height: 2px;
background: #FF0000;
}
Not exactly the same in dimension but you can edit and create like that.
Edit: For your new shape, add the below in CSS and HTML:
CSS:
.fill {
position: relative;
left: -14px;
top: 2px;
height: 0;
width: 0;
border-bottom: 6px solid #ffffff;
border-left: 14px dotted transparent;
border-right: 14px dotted transparent;
z-index: 2;
}
HTML:
<div class="arrow">
<div class="fill"></div>
</div>
<div class="line"></div>