Add text in CSS chevron shape - html

Question

A status bar made with a number of divs, Each has text status in the middle.
Generated the chevron shape with CSS, Shape made with joining two parallelograms. How I can add a text in the middle of each chevron.
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px;
height:20px;
width: 200px;
margin-top:30px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: #009999;
color: white;
-webkit-transform: skew(60deg, 0deg);
-moz-transform: skew(60deg, 0deg);
-ms-transform: skew(60deg, 0deg);
-o-transform: skew(60deg, 0deg);
transform: skew(60deg, 0deg);
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
right: 0;
height: 50%;
width: 100%;
background: #009999;
-webkit-transform: skew(-60deg, 0deg);
-moz-transform: skew(-60deg, 0deg);
-ms-transform: skew(-60deg, 0deg);
-o-transform: skew(-60deg, 0deg);
transform: skew(-60deg, 0deg);
}
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>

Answer 1

You should consider using clip-path in combination with a negative right margin instead of your transform: skew() approach. You would have way less code and the result is the same:
.chevron {
display: inline-block;
min-width: 150px;
text-align: center;
padding: 15px 0;
margin-right: -30px;
background: #009999;
-webkit-clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%, 20% 50%);
clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%, 20% 50%);
}
<div class="chevron">Text here</div>
<div class="chevron">Text here</div>
<div class="chevron">Text here</div>

Answer 2

Give z-index to :before , :after
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px;
height:20px;
width: 200px;
margin-top:30px;
text-align:center;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: #009999;
color: white;
-webkit-transform: skew(60deg, 0deg);
-moz-transform: skew(60deg, 0deg);
-ms-transform: skew(60deg, 0deg);
-o-transform: skew(60deg, 0deg);
transform: skew(60deg, 0deg);
z-index:-1;
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
right: 0;
height: 50%;
width: 100%;
background: #009999;
-webkit-transform: skew(-60deg, 0deg);
-moz-transform: skew(-60deg, 0deg);
-ms-transform: skew(-60deg, 0deg);
-o-transform: skew(-60deg, 0deg);
transform: skew(-60deg, 0deg);
z-index:-1;
}
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>

Answer 3

You need to add z-index:-1 to the .chevron:before and .chevron:after:
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px;
height:20px;
width: 200px;
margin-top:30px;
text-align:center;
}
.chevron:before {
top: 0;
-webkit-transform: skew(60deg, 0deg);
-moz-transform: skew(60deg, 0deg);
-ms-transform: skew(60deg, 0deg);
-o-transform: skew(60deg, 0deg);
transform: skew(60deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-60deg, 0deg);
-moz-transform: skew(-60deg, 0deg);
-ms-transform: skew(-60deg, 0deg);
-o-transform: skew(-60deg, 0deg);
transform: skew(-60deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #009999;
}
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>