Add text in CSS chevron shape

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>