在 CSS V 形中添加文本

Question

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

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