通过 <div> 或 <span> 的对角线

Posted 2023-03-06

【中文标题】通过 <div> 或 <span> 的对角线

【英文标题】：Diagonal line through <div> or <span>

【发布时间】：2013-07-10 06:01:32

【问题描述】：

我想要从<div> 或<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 也是我的一个选择。

【问题讨论】：

您发布的 jsFiddle 的问题是？

如果<span> 跨越线，你希望如何绘制对角线？代码应该假装<span> 在一条线上，画两条单独的对角线，还是忽略这种可能性？

您是否正在寻找一种在页面上绘制元素的方法？ （也许不只是一条线？）

这里是a demo of a variation of your linked solution。这是您发布的问题中最新的 jsFiddle 演示，改为使用 divs 和 spans 而不是表格。看起来divs 已经可以正常工作了，但是spans 的对角线出现在行首，而不是在span 上方。

@j08691：它没有划掉文本。

【参考方案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;

看我的小提琴：

http://jsfiddle.net/3GWw2/

【讨论】：

有趣...这种方法的兼容性如何？

如果您不熟悉 html#PathElement

还要注意，如果你想从右上到左下，你不需要先画到左下，就像在这个答案中所做的那样。您可以只使用：

另请注意，如果您使用十六进制颜色值，则需要escape # as %23。

M0 0 L10 10 不是更合适吗？另外，请注意 // 不是 CSS cmets（它们实际上会注释 next construct，即此处为 background 和 background-size，因此此解决方案不适用于它们）。

【参考方案2】：

第一个小提琴作为背景图像的例子是否不够好？

http://jsfiddle.net/zw3Ve/410/

.line 
    display:inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size:100% 100%;

【讨论】：

对于任何想知道的人，我使用的简化版本是display:inline-block; position: relative; background:url(cross_out.png); background-size:100% 100%;

【参考方案3】：

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

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);

【讨论】：

+1 是唯一的 100% CSS 解决方案（不需要 SVG 图像背景），另外还可以有效地参数化颜色、方向和线宽！

【参考方案4】：

实际上，这更多是关于几何而不是编码的问题。使用正方形这很容易，但是使用矩形你必须自己做数学。还记得那些抱怨在“现实生活”中他们永远不必计算对角线长度的孩子吗？ :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>

还有一个 jsfiddle：http://jsfiddle.net/LWAKn/

【参考方案5】：

您可以使用像这样的 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"   viewBox="0 0 200 50">
    <line fill="none" stroke="#000" x1="0" y1="0" x2="200" y2="50"/>
</svg>

将其设置为 span 或 div 的背景

.class-of-div-or-span  background: url("line.svg") no-repeat scroll 0 0 / 100% 100% transparent; 

注意：你必须给你的 span display:block 或 display:inline-block 才能工作。

您还可以内联 svg，在对象标签中使用它或将其嵌入到您的 css 中。

【讨论】：

我真的很喜欢这个，但它真的很小（我只是划掉了几个字符），在 Chrome 中几乎察觉不到。我尝试将 SVG 调整为 <line fill="none" stroke="#000" x1="100" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0); stroke-width:25" />，但在用作背景时它并没有改变粗细。想法？

好的，我让它工作得很好，但出于某种原因我不得不将 SVG 内联到 CSS 中。对于那些想知道的人，这就是我在 CSS 中的最终结果：background: url("data:image/svg+xml;utf8,<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='100px' height='50px' viewBox='0 0 100 50'><line fill='none' stroke='%23000' x1='100' y1='0' x2='0' y2='50' style='stroke:rgb(255,0,0); stroke-width:5' /></svg>") no-repeat scroll 0 0 / 100% 100% transparent;

为了节省一些空间，您可以使用更紧凑的 svg/xml，如下所示（应该完全相同）：<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100px' height='50px' viewBox='0 0 100 50'><line fill='none' x1='100' y1='0' x2='0' y2='50' style='stroke:rgb(255,0,0); stroke-width:5' /></svg>

新问题：我的解决方案在 IE 中不起作用（当然）。有人知道 CSS 文件中的 IE 和内联 SVG 吗？

试图弄清楚为什么 IE 再次表现得粗鲁。同时，在我所有的浏览器上，链接版本 (background:url(line.svg)) 都有效，包括。 IE >= 9。您使用的是哪个版本的 IE，您能否再次检查链接的版本（可能是错字？）。