如何用CSS斜穿

Answers:

188

使用:before伪元素可以做到这一点。给出:before一个边框，然后使用CSS变换旋转它。这样，就不会在DOM中添加任何额外的元素，添加/删除删除线就像添加/删除类一样简单。

这是一个演示

注意事项

  • 这仅适用于IE8。IE7 不支持:before，但将在浏览器中正常降级做支持，:before但不支持CSS变换。
  • 旋转角度是固定的。如果文本较长，则该行将不会接触文本的角。请注意这一点。

的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>
— Bojangles
source
我认为这无法在IE8中使用。. transform除非与它兼容，否则它没有任何类似的东西filter
— Explosion Pills 2013年
3
您说得对，对不起。IE8将正常降级为正常的删除线。我应该明确指出
— Bojangles，2013年
@Bojangles，您好，我正在尝试将其应用于TD元素，但在Firefox中似乎有点不对。。jsfiddle.net/Ms4Qy 知道为什么会这样吗？谢谢
— 汤姆·亨特
1
— 汤姆·亨特
3
另一个需要考虑的警告-如果您的文本分成两行，则删除线将无法按预期呈现：d.pr/i/1dKP5
— Nick
59

您可以使用linear-gradient和currentColor来避免对字体颜色进行硬编码：

.strikediag {
  background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
}
.withpadding {
  padding: 0 0.15em;
}
The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
<p>
The value is <span class="strikediag withpadding">2x</span>3x<br>
The number is <span class="strikediag withpadding">1234567890</span>.
展开摘要

如果不需要元素完全内联，则可以使用伪元素将线放置在元素顶部。这样，可以通过更改伪元素的大小来调整角度：

.strikediag {
  display: inline-block;
  position: relative;
}
.strikediag::before {
  content: '';
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  top: 0.38em;
  bottom: 0.38em;
  background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
  pointer-events: none;
}
The value is <span class="strikediag">2x</span> 3x<br>
The number is <span class="strikediag">1234567890</span>.
展开摘要

— 用户
source
7 
del {
    position:relative;
    text-decoration:none;
}
del::after {
    content:"";
    position:absolute;
    top:50%; left:0; width:100%; height:1px; 
    background:black;
    transform:rotate(-7deg);
}
— 内核
source
4

我认为您可以将旋转效果应用于水平尺。就像是：

<html>
    <body>
        <hr />
        123456
    </body>
</html>

使用CSS：

HR
{
   width: 50px;
   position: absolute;
   background-color: #000000;
   color: #000000;
   border-color: #000000;
   transform:rotate(-7deg);
   -ms-transform:rotate(-7deg);
   -moz-transform:rotate(-7deg);
   -webkit-transform:rotate(-7deg);
   -o-transform:rotate(-7deg);
}

小提琴

不过，您的里程可能会因浏览器和版本而异，所以我不确定是否要使用此功能。例如，您可能必须提取一些时髦的VML代码以支持IE的较早版本。

— 迈克·克里斯滕森
source
注1：-7度，不+7；注意2：HRChrome中为灰色；有可能覆盖吗？
— 约翰·德沃夏克
那么所有不支持CSS3转换的浏览器呢？
— Mooseman
是的，我相信您需要设置border-color和background-color。 更新的小提琴
— Mike Christensen
2

CSS3渐变

background-image: linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -o-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -moz-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -webkit-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);
background-image: -ms-linear-gradient(left bottom, rgb(234,20,136) 0%, rgb(255,46,164) 50%, rgb(255,74,197) 0%);

background-image: -webkit-gradient( linear, left bottom,right top,color-stop(0, rgb(234,20,136)), color-stop(0.5, rgb(255,46,164)), color-stop(0, rgb(255,74,197)) );

我的示例无法完全满足您的需求，但是，有关更多信息和有趣的调整，请参见http://gradients.glrzad.com/。

您要做的是创建一个background-gradient，white-black-white并将您定位opacity在48% 50% 52%。

— 米歇尔·帕特恩（Milche Patern）
source
这给了我障碍，而不是线条。
— ashleedawg
0

我认为没有可持续的CSS解决方案。

我的纯CSS解决方案是将另一个文本元素放在您的第一个文本元素之后，该文本元素的字符数相同（字符为''），直行的文本精度和旋转变换。

就像是：

<html>
<head>
<style>
.strike{
 text-decoration: line-through;
-webkit-transform: rotate(344deg);
-moz-transform: rotate(344deg);
-o-transform: rotate(344deg);}
</style>
</head>
<body>
<p>Text to display</p>
<p class='strike'>               </p>
</body>

文字旋转示例

我期待看到其他用户提供更好的答案。

— 李维
source
0

这是一个古老的问题，但是作为替代方案，您可以使用CSS3线性梯度（http://codepen.io/yusuf-azer/pen/ojJLoG）。

有关详细说明和更少的解决方案检查

http://www.yusufazer.com/tutorials-how-to/how-to-make-a-diagonal-line-through-with-css3/

span.price--line-through {
  background-color: transparent;
  background-image: -webkit-gradient(linear, 19.1% -7.9%, 81% 107.9%, color-stop(0, #fff), color-stop(.475, #fff), color-stop(.5, #000), color-stop(.515, #fff), color-stop(1, #fff));
  background-image: -webkit-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
  background-image: repeating-linear-gradient(163deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
  background-image: -ms-repeating-linear-gradient(287deg, #fff 0%, #fff 47.5%, #000 50%, #fff 51.5%, #fff 100%);
}
— 刮。
source
-1

我使用CSS类在HTM中使用SVG来做到这一点：

HTML：

<ul>
<li>Regular Price: <div class="zIndex-10a">$4.50</div><div class="zIndex-10b"><svg height="16" width="5"><line x1="0" y1="20" x2="40" y2="0" class="Strike-01a"></svg></div></li>
</ul>

CSS：

/* -- CONTAINS TEXT TO STRIKE ---- */ .zIndex-10a { display: inline-block; position: relative;  left:  0px; z-index: 10; }
/* -- CONTAINS SVG LINE IN HTML -- */ .zIndex-10b { display: inline-block; position: relative; right: 40px; z-index: 11; }
/* -- SVG STROKE PROPERTIES ------ */ .Strike-01a { stroke: rgb(255,0,0); stroke-width:2; }

到目前为止，可能会有更简单，更简单的方法。我只是在紧要关头为我的产品详细信息特价页面做饭。希望它能帮助某人。

— 图标矩阵
source
一定有什么东西丢失，因为这不工作的一个片段作为-是
— ashleedawg
-1

尝试

.mydiv {
    background-color: #990000;
    color: #FFFF00;
    font-size: 2em;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 15px;
    max-width: 300px;
    width: 100%;
}
.strikethrough-100p, .strikethrough-50p{
  position: relative;
 text-align: center;
}
.strikethrough-100p:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 3px solid;
  border-color: inherit;

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

  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}
<div class="mydiv">
<div class="strikethrough-100p">123456</div>
</div>
<br>
<div class="mydiv">
<div class="strikethrough-50p">123456</div>
</div>
展开摘要

— Waruna Manjula
source
-3

这是一个花哨的版本：

background:none repeat scroll 0 0 rgba(255, 0, 0, 0.5);
-moz-border-radius:20px 0;
-webkit-border-radius:20px 0;
border-radius:20px 0;
content: "";
height:5px; left:-5%;
position:absolute;
top:30%;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transform:rotate(-7deg);
transform-origin:50% 50% 0;
width:110%;
— 乔瑟
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.