21

我想要从 a 的右上角<div>或左下角画一条对角线<span>。问题是内容有时会更长或更短。所以，像静态图像这样的东西是行不通的。基本上我想要这里描述的内容（如何在表格单元格中创建对角线？）但对于 a<div>或 a <span>。

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

这样做也是如此：http ://css-tricks.com/forums/discussion/13384/diagonal-line/p1

这是这篇文章的重试：如何用 css 斜切

我似乎无法弄清楚这些。看起来一个纯 CSS 解决方案应该在这里工作，但我只是没有技能来实现它。jQuery 对我来说也是一个选择。

4

5 回答 5

26

您可以使用内联 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/

于 2013-11-27T01:35:08.060 回答
10

以背景图像为例，第一个小提琴是否不够好？

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%;
}
于 2013-07-11T22:02:32.830 回答
6

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

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);
于 2016-09-28T04:22:29.357 回答
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/

于 2013-07-11T21:00:19.733 回答
4

您可能会使用这样的 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>

将其设置为跨度或 div 的背景

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

注意：您必须提供跨度display:block或display:inline-block才能工作。

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

于 2013-07-11T21:01:54.727 回答