Как сверстать несколько линий(вертикальных и горизонтальных в css)?

Question

[GeorgeKay]

я про линии над картинками

и еще хотел момент один уточнить, не знаю как его оформить в виде полноценного вопроса, поэтому спрошу тут
в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое, таких мест в макете может быть несколько, но при этом фон в макете чередуется в цветах постоянно, условно сначала серый фон, затем синий, потом снова серый и тд

Comments

[Михаил Р.]

скажите это просто так фон сделан через background: linear-gradient или это что-то другое

Угадать по картинке?

[GeorgeKay]

Михаил Р., ну это макет такой, там выше просто другие блоки, я поэтому вопрос и задаю, такие вещи через background: linear-gradient делаются, или может это что-то с абсолютным позиционированием оранжевого блока. Просто это все предполагает адаптив и я в целом спрашиваю, как такое делают?

[Ankhena]

Как сверстать несколько линий(вертикальных и горизонтальных в css)?

Градиенты, псевдоэлементы (фон, бордер)

в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое

Интересный вопрос :)
Как сделаете, так и будет.
Вариантов тут полно. Гриды, псевдо, градиенты, трансформы, отступы и т.д.
Это вы принимаете решение как это верстать. Макет может содержать какие-то подсказки, но вы вовсе не обязаны использовать именно те приемы, которые использовал дизайнер. Ведь ему-то нужно только нарисовать, а вам, чтобы все это функционировало.

[Алекс Глебов]

Оранжевый фон похож на фото отзыва. Рекомендую сделать его вровень с текстом на флексах или гридах. А потом сдвинуть вверх отрицательным маргином. проверьте чтобы текст не наезжал на это фото, при любом количестве символов. А так же заполнение картинки с другим размером ничего не ломало.

Answer 1

[Oscar Handsome]

Привет, вот приме ссыль

<div class='row'>
  <div class="line line__horizontal"></div>
  <div class="line line__vertical line__vertical_left"></div>
  <div class="line line__vertical line__vertical_center"></div>
  <div class="line line__vertical line__vertical_right"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

body {
  background: radial-gradient(#22394d 10%,  #202a38);
  height: 100vh;
}

.row {
  display: flex;
  gap: 10px;
  position: relative;
  padding-top: 100px;
}

.line {
  border: solid 1px #304150;
  
  &__horizontal {
    position: absolute;
    top: 10%;
    left: 5%;
    right: 5%;
  }
  
  &__vertical {
    position: absolute;
    top: 10%;
    height: 20px;

    &_left {
      left: 5%;
    }
    &_center{
      top: 5%;
      left: 50%;
      height: 40px;
      transform: translateX(-50%)
    }
    &_right{
      right: 5%;
    }
  }
}

.box {
  display: block;
  width: 100%;
  height: 300px;
  background-color: #7092be;
}

и еще хотел момент один уточнить, не знаю как его оформить в виде полноценного вопроса, поэтому спрошу тут
в дизайне, визуально кажется что оранжевый блок, выходит за пределы синего и попадает на серый, скажите это просто так фон сделан через background: linear-gradient или это что-то другое, таких мест в макете может быть несколько, но при этом фон в макете чередуется в цветах постоянно, условно сначала серый фон, затем синий, потом снова серый и тд

Это position
А так лучше Вам пройти базу на каком нибудь htmlacademy

Comments

[Сергей delphinpro]

Достаточно одного элемента для линий
Примерно:

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

.line {
  border: 1px solid red;
  border-bottom: none;
  width: ?;
  height: 30px;
  &::before {
    position: absolute
    left: center
    height: 30px;
    top: -15px;
  }
}

[Oscar Handsome]

Сергей delphinpro, так не будет работать нужно не забыть про content: ''

[Сергей delphinpro]

Oscar Handsome, я только принцип показал.

[Oscar Handsome]

Сергей delphinpro, так я тоже выше написал "пример" :D

[Oscar Handsome]

Сергей delphinpro, я этот вариант тоже продумывал в начале, но т.к. вертикальных линий 3 шт, и и одна из них длинее по центру, все же придется доп. классы писать. И это еще надо ::before у класса менять. Что скажете?

[Ankhena]

Oscar Handsome, если вам хочется сделать пустой элемент в разметке, да ещё и не один, с огромной вероятностью вы творите что-то не то. Исключения, конечно, есть, но тут с виду достаточно псевдоэлементов.

[Oscar Handsome]

Ankhena, а тут задачи не было, без изменений html сверстать как "в дизайне"

[Сергей delphinpro]

Oscar Handsome, я имел ввиду вот такую простую вещь - https://codepen.io/delphinpro/pen/XWQKLOo