A Pen by Mike Kormendy.
#chevron {
position: relative;
top: 100px;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: #e21a23;
-webkit-transform: skew(0deg, 38.66deg);
-moz-transform: skew(0deg, 38.66deg);
-ms-transform: skew(0deg, 38.66deg);
-o-transform: skew(0deg, 38.66deg);
transform: skew(0deg, 38.66deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #e21a23;
-webkit-transform: skew(0deg, -38.66deg);
-moz-transform: skew(0deg, -38.66deg);
-ms-transform: skew(0deg, -38.66deg);
-o-transform: skew(0deg, -38.66deg);
transform: skew(0deg, -38.66deg);
}
<div id="chevron"></div>
Chevrons come in many stylized forms. This one has parallel slices on the wing-tips.
A Pen by Mike Kormendy on CodePen.