以CSS V形图形添加文字

Question

使用多个div创建的状态栏，每个都在中间有文本状态。 使用CSS生成V形图形，通过连接两个平行四边形制作Shape。如何在每个人字形中间添加文本。

＆＃13;

＆＃13;

.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);
}

＆＃13;

<div  class="chevron"> Text here</div>
<div  class="chevron"> Text here</div>
<div  class="chevron"> Text here</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将z-index:-1添加到.chevron:before和.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>

Answer 2

将z-index提交给:before，:after

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div  class="chevron"> Text here</div>
<div  class="chevron"> Text here</div>
<div  class="chevron"> Text here</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您应该考虑将clip-path与负右边距结合使用而不是transform: skew()方法。您将拥有更少的代码，结果是相同的：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

<div class="chevron">Text here</div>
<div class="chevron">Text here</div>
<div class="chevron">Text here</div>

＆＃13;

＆＃13;

＆＃13;