如何在CSS制作的雪佛龙形状态栏每个模块中添加居中文字？

嘿，我来帮你搞定这个问题！你用两个伪元素拼雪佛龙的思路完全没问题，要在中间加文字其实很简单——只需要在.chevron容器里加个文本元素，然后通过CSS把它定位到居中位置，同时确保文字在雪佛龙形状的上方就行。

完整代码示例 #

HTML

<div class="chevron">
  <span>已完成</span>
</div>
<div class="chevron processing">
  <span>处理中</span>
</div>
<div class="chevron pending">
  <span>未开始</span>
</div>

CSS

.chevron {
  display: inline-block;
  position: relative;
  clear: both;
  padding: 12px;
  height: 20px;
  width: 200px;
  margin-top: 30px;
  /* 基础居中设置：水平居中+垂直居中 */
  text-align: center;
  line-height: 20px; /* 和容器高度一致，实现垂直居中 */
}

.chevron:before,
.chevron:after {
  content: '';
  position: absolute;
  top: 0;
  height: 50%;
  width: 100%;
  background: #009999;
  z-index: 0; /* 让伪元素背景在文字下方 */
}

.chevron:before {
  left: 0;
  transform: skew(60deg, 0deg);
}

.chevron:after {
  left: 0;
  top: 50%;
  transform: skew(-60deg, 0deg);
}

.chevron span {
  position: relative;
  z-index: 1; /* 确保文字在雪佛龙形状之上 */
  color: white;
  font-size: 14px;
  /* 如果需要更灵活的居中（比如容器高度不固定），可以替换成这个：
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  */
}

/* 扩展：不同状态的雪佛龙样式 */
.chevron.processing:before,
.chevron.processing:after {
  background: #ff9900;
}

.chevron.pending:before,
.chevron.pending:after {
  background: #cccccc;
}

关键知识点解析 #

1. 层级控制：给伪元素设置z-index: 0，文本元素设置z-index: 1，这样文字就不会被雪佛龙的背景色块盖住。
2. 居中方式：
   • 简单场景用text-align: center+line-height（和容器高度匹配）就能快速实现水平垂直居中；
   • 如果容器高度不固定，用position: absolute+transform: translate(-50%, -50%)的方式更灵活，能精准居中。
3. 兼容性：transform属性已经被所有现代浏览器支持，如果你需要兼容旧版IE，可以添加前缀（比如-webkit-transform），不过现在一般不需要了。

内容的提问来源于stack exchange，提问作者Anand Jose