Html 通过 <div> 或 <span> 的对角线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17602291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Diagonal line through <div> or <span>
提问by gtilflm
I'm wanting to have a diagonal line drawn from the upper-right corner of a <div>or <span>to the lower-left corner. The problem is that the content will sometimes be longer or shorter. So, something like a static image won't work. Basically I want what's described here (How to create a diagonal line within a table cell?) but for a <div>or a <span>.
我想要从 a 的右上角<div>或左下角绘制一条对角线<span>。问题是内容有时会更长或更短。所以，像静态图像这样的东西是行不通的。基本上我想要这里描述的内容（如何在表格单元格中创建对角线？）但对于 a<div>或<span>.
This has some interesting ideas: http://jsfiddle.net/zw3Ve/11/
这有一些有趣的想法：http: //jsfiddle.net/zw3Ve/11/
So does this: http://css-tricks.com/forums/discussion/13384/diagonal-line/p1
这样做也是如此：http: //css-tricks.com/forums/discussion/13384/diagonal-line/p1
This is kind of a retry at this post: How to strike through obliquely with css
这是这篇文章的重试：如何用 css 斜切
I can't seem to figure any of this out though. It seems like a pure CSS solution should work here, but I just don't have the skills to make that happen. jQuery is an option for me as well.
我似乎无法弄清楚这些。似乎纯 CSS 解决方案应该在这里工作，但我只是没有实现这一点的技能。jQuery 也是我的一个选择。
采纳答案by G-Cyrillus
Is first fiddle as example with image in background instead not good enough?
第一个小提琴作为背景图像的例子而不是不够好？
http://jsfiddle.net/zw3Ve/410/
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%;
}
回答by Tristan Brotherton
You can do this with an inline SVG background, using only CSS and no javascript.
您可以使用内联 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;
}
See my fiddle:
看我的小提琴：
回答by Dunno
Actually this is more of a question about geometry than coding. With squares this is easy, but with rectangles you'll have to do the math yourself. Remember those kids complaining that they'll never have to calculate a diagonal's length in "real life"? :P Here's what I did:
实际上，这更多是关于几何而不是编码的问题。对于正方形，这很容易，但是对于矩形，您必须自己进行数学计算。还记得那些抱怨他们在“现实生活”中永远不必计算对角线长度的孩子吗？: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>
and a jsfiddle: http://jsfiddle.net/LWAKn/
和一个 jsfiddle：http: //jsfiddle.net/LWAKn/
回答by dwtm.ts
You might use an SVG image like this one:
您可能会使用这样的 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>
Set it as background of your span or div
将其设置为 span 或 div 的背景
.class-of-div-or-span { background: url("line.svg") no-repeat scroll 0 0 / 100% 100% transparent; }
Note: you have to give your span display:blockor display:inline-blockin order to work.
注意：你必须给你的跨度display:block或display:inline-block为了工作。
You could also inline the svg, use it in an object tag or embed it in your css.
您还可以内联 svg，在对象标签中使用它或将其嵌入到您的 css 中。
回答by SuperCodeBrah
You can do this with linear-gradient. For example if I want a green and white square that cuts diagonally from bottom left to top right, I give it this background attribute:
你可以用线性渐变来做到这一点。例如，如果我想要一个从左下角到右上角对角切割的绿色和白色方块，我给它这个背景属性：
background: linear-gradient(to bottom right, white, white 50%, green 50%, green);
This means that it starts as white at the top left corner and continues as white all the way to the diagonal line. The transition is immediately from white to green with no actual gradient as both are set at 50%. If you want a gray line between, you could try this:
这意味着它从左上角开始为白色，一直到对角线都为白色。过渡立即从白色变为绿色，没有实际渐变，因为两者都设置为 50%。如果你想要一条灰线，你可以试试这个：
background: linear-gradient(to bottom right, white, white 48%, gray 48%, gray 52%, green 52%, green);
