Html - 如何用css斜切

有一种黑客方法可以做到这一点，使用:before伪元素.你给:before个边框，然后用CSS变换旋转它.这样做不会向DOM添加额外的元素，添加/删除删除删除线与添加/删除类一样简单.

Here's a demo

注意事项

• 这将仅适用于IE8.然而，IE7does not support :before将在do支持:before但不支持CSS转换的浏览器中优雅地降级.
• 旋转Angular 是固定的.如果文本较长，则该行不会触及文本的角.请注意这一点.

CSS

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

HTML

<span class="strikethrough">Deleted text</span>