如何用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%;