Question

我刚刚遇到一个非常好的回答here关于“如何用css斜穿”。解决方案很好，但是我想知道是否有可能在那里使用CSS片段来显示通过顶部的文本。

如果没有，是另一种解决方案吗？

Answer 1

要移动另一个后面的东西你需要给它一个低于另一个元素的z-index，在这种情况下我给了一个z-index -1的

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: #F00;
  z-index: -1;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

Answer 2

您可以将strikethru设为比文本更低的z-index。我将文本突出显示为红色，以便可以看到：

.strikethrough {
  position: relative;
  color: #f00;
}
.strikethrough:before {
  position: absolute;
  z-index: -1;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: #000;

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

http://jsbin.com/oqibus/109/

如何用css斜向穿透显示罢工顶部的文字

2 个答案: