如何通过css倾斜穿透 [英] How to strike through obliquely with css

问题描述

我需要这样的东西：

I need something like this:

如何用css实现呢？我知道一种方法是使用背景图片，但是我可以实现这个只有css没有任何图像？

How can achieve this with css? I know that one way is use background image, but can I achieve this only with css without any image?

推荐答案

hacky的方法来做到这一点，使用：before 伪元素。您给予：之前边框，然后使用CSS变换旋转它。这样做不会向DOM添加额外的元素，添加/删除删除线就像添加/删除类一样简单。

There is a hacky way to do this, using the :before pseudo element. You give the :before a border, then rotate it with a CSS transform. Doing it this way adds no extra elements to the DOM, and adding/removing the strikethrough is a simple as adding/removing the class.

示范演示

• 这只会工作到IE8。 IE7 不支持：之前 ，但会优雅地降级 c 支持：之前，但不支持CSS变换。


• 旋转角度固定。如果文本较长，则该行不会触及文本的角。注意这一点。

• This will only work down to IE8. IE7 does not support :before, however will degrade gracefully in browsers that do support :before but don't support CSS transforms.
• The angle of rotation is fixed. If the text is longer, the line will not touch the corners of the text. Be mindful of this.

.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

HTML

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

这篇关于如何通过css倾斜穿透的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！