如何用css斜着走
我需要这样的东西： 
如何才能实现这与CSS？ 我知道有一种方法是使用背景图像，但我可以实现这一点，只有没有任何图像的CSS？
有一个hacky的方式来做到这一点，使用:before伪元素。 你给:before一个边框:before ，然后用一个CSS转换来旋转它。 这样做不会增加DOM的额外元素，添加/删除删除线就像添加/删除类一样简单。
这是一个演示
注意事项
- 这只会降低到IE8。 IE7 不支持
:before然而， 在支持的浏览器中会优雅地退化，但不支持CSS转换。 - 旋转angular度是固定的。 如果文字较长，则线条不会触及文字的边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>
您可以使用currentColor背景linear-gradient来避免硬编码的字体颜色：
.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>.
我想你可能会应用旋转效果水平的规则。 就像是：
<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的老版本。
del { position:relative; text-decoration:none; } del::after { content:""; position:absolute; top:50%; left:0; width:100%; height:1px; background:black; transform:rotate(-7deg); }
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)) );
我的例子不会满足您的需求，但是，更多的信息和有趣的tweeks： http ://gradients.glrzad.com/
你需要做的是创build一个白黑白的背景渐变，并将你的不透明度定位在48％50％52％
继续
我不认为有一个可持续的CSS解决scheme。
我纯粹的CSS解决scheme将放置在文本的第一个元素后面的另一个文本元素，这些元素的字符数（字符是“'），文本删除直通和旋转变换。
就像是：
<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>
文本旋转示例
我期待着从其他用户那里看到更好的答案。
这是一个老问题，但作为一个替代scheme，您可以使用CSS3线性渐变（例如http://codepen.io/yusuf-azer/pen/ojJLoG ）。
广泛的解释和LESS解决scheme检查
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%); }
这是一个花哨的版本：
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%;
