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;
}

Answer 2

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


.chevron span {
  position:relative;
  z-index:2;   
}

如果您不想更改dom结构，请将z-index:-1添加到.chevron:before

Answer 3

使用z-index：5;

Z-index将帮助您显示前面的任何内容。

Answer 4

也许为.chevon

的css添加一个z-index

你有什么表现吗？

Answer 5

请你的雪佛龙：在课后支持你。

只需添加z-index:-1;

这将设置文本背后的形状

文本坐在div元素背景后面

5 个答案: