Html 对角线通过<；部门>；或<；span>；

我想从

或

的右上角到左下角画一条对角线。问题是内容有时会更长或更短。所以，像静态图像这样的东西不起作用。基本上，我想要这里描述的内容（）但是对于

或

这有一些有趣的想法：

这也是：

这是本文中的一种重试：

---

但我似乎无法理解这些。看起来一个纯粹的CSS解决方案应该在这里起作用，但我只是不具备实现这一点的技能。jQuery对我来说也是一种选择。

实际上，这更多是一个关于几何体的问题，而不是编码的问题。对于正方形，这很容易，但是对于矩形，你必须自己计算。还记得那些孩子抱怨他们在“现实生活”中永远不必计算对角线的长度吗P 以下是我所做的：

div.container /*makes a square container (300x300)*/
{
width: 300px;
height: 150px;
background-color: #aaa;
padding-top: 150px;
}
div.line
{
position: relative;
z-index: 1;
left: -61px; /*this is something I don't understand but apparently is required*/
width: 423px; /*since container is a square this equals to its diagonal: 300*1.41*/
height: 1px;
background-color: #000;
transform: rotate(45deg); /*again, this is easy since its a square. In rectangle you'll have to find a tangent*/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

HTML:
<div class="container">
<div class="line"></div>
</div>

div.container/*制作方形容器（300x300）*/
{
宽度：300px；
高度：150像素；
背景色：#aaa；
填充顶部：150px；
}
分割线
{
位置：相对位置；
z指数：1；
左图：-61px；/*这是我不理解但显然是必需的*/
宽度：423px；/*由于容器是正方形，因此等于其对角线：300*1.41*/
高度：1px；
背景色：#000；
变换：旋转（45度）；/*同样，这很简单，因为它是正方形。在矩形中，你必须找到一条切线*/
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
}
HTML:

---

还有一个JSIDLE:

您可以使用如下SVG图像：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 x="0px" y="0px" width="200px" height="50px" viewBox="0 0 200 50">
    <line fill="none" stroke="#000" x1="0" y1="0" x2="200" y2="50"/>
</svg>

注意：您必须给出span

display:block

或

display:inline block

才能工作

---

您还可以内联svg，在对象标记中使用svg，或者将其嵌入css中。

作为示例，首先是在背景中使用图像，而不是不够好

.line{
显示：内联块；
边框：1px实心#ccc；
利润率：10px；
填充：10px；
背景：url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
背景大小：100%100%；
}

您可以使用内嵌SVG背景，只使用CSS而不使用javascript

.background{
//从左上到右下绘制SVG
背景：url（“数据：image/svg+xml；utf8，”）；
背景重复：无重复；
背景位置：中心；
//缩放
背景尺寸：100%100%，自动；
}

看我的小提琴：

---

您可以使用线性渐变进行此操作。例如，如果我想要一个从左下角到右上角呈对角线切割的绿色和白色正方形，我给它以下背景属性：

background: linear-gradient(to bottom right, white, white 50%, green 50%, green);

这意味着它从左上角开始为白色，一直延续到对角线。过渡立即从白色变为绿色，没有实际的渐变，因为两者都设置为50%。如果您想在两者之间画一条灰线，可以尝试以下方法：

background: linear-gradient(to bottom right, white, white 48%, gray 48%, gray 52%, green 52%, green);

---

您发布的JSFIDLE的问题是：如果

跨行缠绕，您希望如何绘制对角线？代码应该假装

在一条线上，画两条单独的对角线，还是忽略这种可能性？您是否在寻找在页面上绘制元素的方法？（也许不仅仅是一句台词？）。这是您发布的问题中最新的JSFIDLE演示，改为使用

div

s和

span

而不是表。看起来

div

s已经可以正常工作了，但是

span

s的对角线出现在行的开头，而不是

span

@j08691:它没有划掉文本。我真的很喜欢这个，但是它非常小（我只划掉了几个字符），而且在Chrome中几乎看不到。我尝试将SVG调整到这个

，但当用作背景时，它没有改变厚度。想法？好吧，我让它工作得很好，但出于某种原因，我不得不将SVG内联到CSS中。对于那些想知道的人，以下是我在CSS中得到的结果：

background:url（“data:image/svg+xml；utf8，”）无重复滚动0 0/100%100%透明

为了节省一些空间，您可以使用更紧凑的svg/xml，如下所示（应该完全相同）：

新问题：我的解决方案在IE中不起作用（当然）。有人知道IE和CSS文件中的内联SVG吗？想知道为什么IE再次表现得粗鲁。同时，在我所有的浏览器上，链接版本（

background:url（line.svg）

）都能正常工作，包括IE>=9。您使用的IE版本是什么？请再次检查链接版本（可能是打字错误？）。对于任何想知道的人，我使用的简化版本是

display:inline block；位置：相对位置；背景：url（cross_out.png）；背景大小：100%100%有趣…这种方法的兼容性是什么？如果您不熟悉的元素，可以添加fill='none'，stroke='grey'和stroke width='1'属性，以仅绘制不带填充的特定颜色的线条。路径元素使用基于元素中设置的viewBox属性的坐标系。此处的视图框设置为0 10 10。。。一个高10个单位宽的盒子。在path元素上，M表示将笔放在此处（0，0），L表示从0到10再到10（从左上角开始，从左下角开始，然后到右上角）。请参阅：还要注意，如果要从右上角到左下角，不需要像在本答案中所做的那样先画到左下角。您可以只使用：还请注意，如果您使用十六进制颜色值，则需要使用。难道
M0 L10 10
不更合适吗？另外，请注意，
/
不是CSS注释（它们实际上会注释背景，即这里的
background
和
background size
，因此此解决方案不适用于它们）。+1是唯一的100%CSS解决方案（不需要SVG图像背景）
background: linear-gradient(to bottom right, white, white 48%, gray 48%, gray 52%, green 52%, green);