CSS @绘制对角线以保持倾斜角和固定的线长

Question

我希望能够画出既不向上也不向下或向右走的线。它们旋转一定角度。我希望能够以一定角度编写代码并正确选择大小。问题是我学会的方法是添加一个宽度或高度很小的小盒子，然后通过变换对其进行旋转。进行调整的问题是它无法调整长度和位置，我很困惑，无法正确绘制。

说我使用画布来简单地平方：

.box{
    position: relative;
    height: 640px;
    width: 640px;
    background: white;
  }

并且我在中间画一条水平线。

.shape1{
     position: absolute;
     top: 50%;
     background-color:black;
     width: 100%;
     height: 1%;
}

（显然shape1嵌套在框中）

然后我申请

transform: rorate(45deg);

然后开始进行调整。显然，对角线无法完成整个正方形，但是我可以做些调整以保持45度的角度，开始于（100,0），结束于（0,100）（假设maxX = 100和maxY = 100）

我发现translateX和translateY有用的功能，但是我仍然需要某种功能来调整行的长度。

有人对如何执行此操作有任何想法吗？

非常感谢

Answer 1

您可以使用linear-gradient：

section {
  display: inline-block;
  margin: 1em;
  outline: solid 1px red;
  background: linear-gradient(to top right, #0000 calc(50% - 1px), #000, #0000 calc(50% + 1px))
}

.square {width:100px; height:100px;}

.rect {width:187px; height:103px;}

<section class="square"></section>
<section class="rect"></section>