Вертикальные линии

Question

Решил сделать вертикальные линии для страницы. Но когда я написал код, то увидел, что линии разного размера. А когда я пытаюсь вписать width: 720px; для этих линий, то они меняют размер (как и было задумано), но ещё и перемещаются, с нужной позиции. Как это можно исправить?

HTML

<div class="line"></div>
<div class="line_1"></div>
<div class="line_2"></div>

CSS

body {
margin: 0;
padding: 0;
background-color: #000;
}

.line {
text-align: center;
position: relative;
transform: rotate(90deg);
border: 1px solid white;
}

.line_1 {
margin-right: 50%;
position: relative;
transform: rotate(90deg);
border: 1px solid white;
}

.line_2 {
margin-left: 50%;
position: relative;
transform: rotate(90deg);
border: 1px solid white;
}

Answer 1

Если нужны линии по всей высоте страницы, то можно воспользоваться свойством linear-gradient:

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #000;
  background-image: linear-gradient(90deg, transparent 25%, #fff 25%, #fff calc(25% + 1px), transparent calc(25% + 1px), transparent 50%, #fff 50%, #fff calc(50% + 1px), transparent calc(50% + 1px), transparent 75%, #fff calc(75%), #fff calc(75% + 1px), transparent calc(75% + 1px));
}

БЛОГ НА HUSL

Вертикальные линии

Ответы (1 шт):