Question

所以我有一个div，其中的内容应该总是对角划掉。

我尝试过很少有具有绝对位置的元素的解决方案但是它不够好，因为应该划掉的div的内容和大小可以变化，因此交叉也应该是自适应的。

基本上我需要做这样的事情：http://www.awesomescreenshot.com/0515d31j22

Answer 1

这应该适合你。

.strike {
  position: relative;
  display: inline-block;
}
.strike:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 120%;
  background: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(25deg);
}

<div class="strike">$55.55</div>

<br><br>

<div class="strike">$555.55</div>

<br><br>

<div class="strike">$5555.55</div>

Answer 2

一些线性渐变可以做到这一点，并且它将自动调整为元素的尺寸，并且不需要度数符号。

div {
    width: 25%;
    height: 250px;
    margin: 1em auto;
    border:1px solid grey;
    position: relative;
}
div:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
background:
    linear-gradient(to bottom left, transparent 0%, transparent 50%, red 51%, transparent 51%, transparent 100%), 
    linear-gradient(to bottom right, transparent 0%, transparent 50%, red 51%, transparent 51%, transparent 100%);

}

<div></div>

如何创建div，其中的内容将始终沿对角线划掉？

2 个答案: