Шкала времени

  alexei 08/02/2022 - 10:00

Здесь вы узнаете, как сделать адаптивную "шкалу времени" при помощи CSS.


Шкала времени

2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2016

Lorem ipsum dolor sit amet, quo ei simul congue exerci.

2015

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto perfecto perfecti perfect!


Как сделать шкалу времени

Шаг 1) Добавляем HTML:


<div class="timeline">
  <div class="container left">
    <div class="content">
      <h2>2017</h2>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2016</h2>
      <p>Lorem ipsum..</p>
    </div>
  </div>
</div>

Шаг 2) Добавляем CSS:


* {
  box-sizing: border-box;
}

/* Задаем фоновый цвет */
body {
  background-color: #474e5d;
  font-family: Helvetica, sans-serif;
}

/* Сама шкала времени (вертикальная линейка) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* Сама шкала времени (вертикальная линейка) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Контейнер вокруг контента */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* Кружки на шкале времени */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Разместим контейнер слева */
.left {
  left: 0;
}

/* Разместим контейнер справа */
.right {
  left: 50%;
}

/* Добавляем стрелки к левому контейнеру (указывающие направо) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Добавляем стрелки к правому контейнеру (указывающие налево) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Фиксируем кружок для контейнера на правой стороне */
.right::after {
  left: -16px;
}

/* Сам контент */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Медиа-запросы – Адаптивная шкала времени на экранах с шириной меньше 600px */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Контейнеры на всю ширину */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Убедимся, что все стрелки указывают налево */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Убедимся, что все кружки на одном и том же месте */
  .left::after, .right::after {
    left: 15px;
  }

/* Убедимся, что все правые контейнеры будут вести себя как левые контейнеры */
  .right {
    left: 0%;
  }
}