html - 以 CSS 人字形添加文本

Question

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

.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

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

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