时间戳

首页 > 解决方案 > CSS@ 绘制对角线保持倾斜角度和线的长度固定

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

问题描述

我希望能够绘制不上下或左右的线条。它们旋转一定角度。我希望能够以一定的角度编写代码并正确选择大小。问题是我学会的方法是添加一个宽度或高度非常小的小盒子，然后用变换旋转它。调整它的问题是它调整了长度和位置，我很困惑，无法正确绘制。

假设我使用 Canvas，简单地将其平方：

.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 有用的函数，但我仍然需要某种函数来调整行的长度。

有没有人知道如何做到这一点？

非常感谢

标签： cssrotationlineanglevector-graphics

解决方案

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

推荐阅读