html - 文本位于 div 元素背景后面

Question

在我有这段代码的那一刻我有点困惑:

HTML:

<div class="ms-layer ms-caption chevron">97.2%</div>

CSS:

.chevron {
  position: relative;
  top: 5px !important;
  text-align: center;
  padding: 10px;
  margin-bottom: 6px;
  height: 200px;
  width: 200px;
  color: red;
  font-size: 6em;
}

.chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: blue;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
.chevron:after {
  content: '';
  position: relative;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: blue;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

现在您可以看到，人字形由两部分组成，前类和后类。

我遇到的问题是我添加到 div 的文本位于人字形后面，但我希望它位于顶部。我以前没有真正使用过 CSS 形状，所以我有点困惑为什么它不起作用。

如您所见，我将 div 位置的一侧设置为绝对位置，将另一侧设置为相对位置，虽然有所不同，但并没有解决问题。

任何帮助都会非常感谢:)

Answer 1

试试这段代码

.chevron:before {
    background: none repeat scroll 0 0 blue;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(0deg, -6deg);
    width: 50%;
    z-index: -1;
}