我需要这样的东西：
如何用css实现这一点？我知道一种方法是使用背景图片，但我只能用没有任何图片的 css 来实现吗？
问问题
81617 次
11 回答
218
有一个hacky方法可以做到这一点，使用: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>
于 2013-01-29T22:51:52.517 回答
75
您可以使用背景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>.于 2016-11-09T02:11:43.840 回答
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);
}
于 2013-01-29T22:53:27.773 回答
5
我认为您可能可以将旋转效果应用于水平规则。就像是：
<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。
于 2013-01-29T22:49:52.100 回答
4
从上面增强 Bojangles 的答案：
.strike-diagonal-price {
position: relative;
background-color: black;
color: white;
}
.strike-diagonal-price:before {
position: absolute;
content: "";
left: 0;
top: 45%;
right: 0;
border-top: 2px solid;
border-color: red;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
现在我得到了我需要的效果：
于 2020-09-22T22:54:38.017 回答
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-gradientofwhite-black-white并将你的位置opacity放在类似48% 50% 52%.
于 2013-01-29T23:00:54.377 回答
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>
</html>
我期待看到其他用户提供更好的答案。
于 2013-01-29T22:55:41.053 回答
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%);
}
于 2015-11-13T10:39:58.230 回答
-1
我在 HTM 中使用带有 CSS 类的 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; }
现在可能有更简单的方法。我只是在紧要关头为我的产品详细信息特价页面做了这个。希望它可以帮助某人。
于 2018-04-26T01:21:24.517 回答
-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>于 2020-04-14T16:44:24.743 回答
-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%;
于 2014-07-09T08:46:46.843 回答