html - 通过 或 的对 Angular 线

Question

我想从 <div> 的右上角画一条对 Angular 线或 <span>到左下角。问题是内容有时会更长或更短。所以，像静态图像这样的东西是行不通的。基本上我想要这里描述的内容 ( How to create a diagonal line within a table cell? ) 但对于 <div>或 <span> .

这有一些有趣的想法:http://jsfiddle.net/zw3Ve/11/

这也是:http://css-tricks.com/forums/discussion/13384/diagonal-line/p1

这是对这篇文章的重试:How to strike through obliquely with css

虽然我似乎无法弄清楚这些。似乎纯 CSS 解决方案应该可以在这里工作，但我只是没有实现这一目标的技能。 jQuery 也是我的一个选择。

Answer 1

您可以使用内联 SVG 背景，仅使用 CSS 而不使用 javascript 来实现这一点。

.background {
   // Draw an SVG top left to bottom right 
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10' fill='red' /></svg>");
   background-repeat:no-repeat;
   background-position:center center;
   //scale it 
   background-size: 100% 100%, auto;
}

看我的 fiddle :

http://jsfiddle.net/3GWw2/