Линии через весь макет, как сверстать?

242

31 октября 2018, 06:10

Если присмотреться к макету на нем видно линии (я их пометил красными линиями для наглядности) которые проходять через весь сайт с самого верху и вниз, подскажите как их сверстать что бы они совпадали на всех секциях сайта?

Answer 1

.container { 
  position: relative; 
  max-width: 1200px; 
  margin: 0 auto; 
  height: 100vh; 
  background-color: #e0e1e5; 
} 
 
.container-line { 
  border-left: 1px solid red; 
  border-right: 1px solid red; 
} 
 
.container-line::before { 
  content: ''; 
  display: block; 
  position: absolute; 
  height: 100%; 
  width: 1px; 
  background-color: red; 
  top: 0; 
  left: 50%; 
} 
 
.container-line::after { 
  content: ''; 
  display: block; 
  position: absolute; 
  height: 100%; 
  width: 50%; 
  top: 0; 
  left: 25%; 
  border-left: 1px solid red; 
  border-right: 1px solid red; 
}

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

Answer 2

Я почти уверен, что это вам дизайнер сетку для удобства оставил, но раз уж хотите и ее заверстать, то держите резиновый вариант:

body { 
  background-color: wheat; 
} 
.container.main { 
  position: relative; 
  width: 90%; 
  margin: 10px auto; 
  min-height: 200px; 
  background: repeating-linear-gradient(90deg, 
      grey, 
      grey 1px, 
      transparent 1px, 
      transparent 25%); 
} 
 
.container.main:after { 
  content: ''; 
  display: block; 
  position: absolute; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  border-right: 1px solid grey; 
}