以 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

您需要将 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

.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

您应该考虑将 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>

以 CSS 字形添加文本

Add text in CSS chevron shape

html

css

css-shapes