Question

我有一个表格元素，数字从1到100，我想以编程方式使用CSS在任意两个单元格之间添加行。为了做到这一点，我创建了一个绝对定位的div。现在我应该使用单元格的偏移来计算该div的位置，高度和旋转度。

让s成为＆＃34;起点＆＃34;单元格的偏移量和e＆＃34;结束点＆＃34;单元格的偏移量。

我认为div的偏移应该像s一样。
根据毕达哥拉斯定理，我认为高度应为Math.sqrt( Math.pow(s.top-e.top, 2) + Math.pow(s.left-e.left, 2) )。
使用三角学，我认为旋转度应为-Math.atan2(s.top-e.top, s.left-e.left)*180/Math.PI。

这些中的一些（或全部）可能是错误的，因为我尝试了它们并且它似乎没有产生正确的线。 Here's a fiddle用于演示。任何人都可以纠正我，以便这个algorythm能产生正确的线吗？

谢谢！

Answer 1

将div的左上角放在线的起点所在的位置，将div的右下角放在线的末尾。

div看起来像这样：

<div class="diag" style="top: 0px; right: 100px; bottom: 300px; left: 0px;"></div>

然后在CSS中使用SVG图像：

.diag {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
    position: absolute;
}

看一看这里的视觉效果：http://jsfiddle.net/Lmphh4jj

如何在两个表格单元格之间拉伸div？

1 个答案: