CSS @ Рисование диагональных линий с фиксированным углом наклона и длиной линии - PullRequest
Новая
       104

CSS @ Рисование диагональных линий с фиксированным углом наклона и длиной линии

1 голос
/ 26 апреля 2020

Я хочу иметь возможность рисовать линии, которые не go вверх-вниз или влево-вправо. Они вращаются на определенный угол. Я хотел бы иметь возможность написать код с определенным углом и правильно выбрать размер. Проблема в том, что я научился это делать, добавив маленькую рамку с очень маленькой шириной или высотой, а затем вращая ее с помощью преобразования. Проблема с настройкой этого - это откорректировать длину и позицию, и я запутался, не имея возможности правильно рисовать.

Скажем, я использую 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, но мне все еще нужна какая-то функция для настройки длины линии.

Кто-нибудь знает, как это сделать?

Большое спасибо

1 Ответ

0 голосов
/ 26 апреля 2020

Вы можете использовать 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>
...