Как правильней сверстать такой таймлайн? Есть идеи сделать на абсолютах, но не будет адаптивно.
6
-
Теоретически, можно использовать SVG.– ISD4 июл 2020 в 8:24
-
Кстати, а как это на мобильном должно выглядеть?– ISD4 июл 2020 в 8:33
-
На мобилках элементы друг под другом– fenq224 июл 2020 в 8:34
-
тогда на SVG делайте - откройте любой векторный редактор и нарисуйте– Monkey Mutant4 июл 2020 в 9:06
-
Адаптив для мобильных делать?– ISD4 июл 2020 в 9:13
|
Показать ещё 1 комментарий
1 ответ
Вот результат. Адаптивно, для мобильных нормально. Ссылка на jsfiddle
/* Шрифт - просто для аккуратности */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
:root {
/* Цвета */
--bg: #ffffff;
--fg: #000000;
--line: #e5e5e5; /* Цвет линий */
--primary: #90be6d; /* Цвет финиша */
/* Некоторые вешь, не очень важные */
background: var(--bg);
color: var(--fg);
padding: 50px;
font-family: 'Roboto', sans-serif;
}
.timeline {
position: relative;
padding-right: 100px;
}
/* Закругление линии */
.timeline::after {
content: '';
display: block;
position: absolute;
right: 0;
top: 51px;
height: 200px;
border: 2px dashed var(--line);
border-left: none;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
width: 100px;
}
.line {
display: flex;
position: relative;
height: 200px;
}
.bottom-line {
flex-direction: row-reverse;
}
.line-item {
display: flex;
flex-direction: column;
flex-grow: 1;
position: relative;
}
/* Основная часть пунктира */
.line-item::before {
content: '';
display: block;
position: absolute;
top: 51px;
left: 0;
right: 0;
border-top: 2px dashed var(--line);
}
/* Пунктир у финиша */
.line-item.line-item-finish::before {
left: unset;
width: 60px;
right: -5px; /* Поправка для правильного пунктира */
}
.bottom-line .line-item {
align-items: flex-end;
}
.line-item .text {
margin-left: 10px;
}
.circle {
box-shadow: 0 10px 30px 0 #00000015;
padding: 20px;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--bg);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.line-item-finish .circle {
margin: 40px;
height: 24px;
width: 24px;
padding: 0;
background: var(--primary);
}
.circle img {
width: 64px;
height: 64px;
}
/* Адаптив */
/* Вероятное, в зависимости от текста надо будет поправить */
@media screen and (max-width: 700px) {
.timeline {
padding: 0;
}
.timeline::after {
display: none;
}
.line {
flex-direction: column;
height: unset;
}
.line-item {
flex-direction: row;
align-items: flex-start !important;
}
.line-item .text {
margin-top: 20px;
margin-left: 30px;
}
.line-item::before {
content: '';
display: block;
position: absolute;
left: 51px;
top: 0;
bottom: 0;
border-left: 2px dashed var(--line);
border-top: none;
}
.line-item.line-item-finish::before {
bottom: unset;
height: 60px;
right: -5px; /* To fix dashes */
left: 51px;
top: 5px;
}
}
<!-- TODO: Добавить флажок над финишом -->
<section class="timeline">
<div class="line top-line">
<div class="line-item">
<div class="circle">
<img src="https://img.icons8.com/wired/64/000000/factory.png"/>
</div>
<div class="text">Начало</div>
</div>
<div class="line-item">
<div class="circle">
<img src="https://img.icons8.com/wired/64/000000/co2.png"/>
</div>
<div class="text">Это шаг второй</div>
</div>
<div class="line-item">
<div class="circle">
<img src="https://img.icons8.com/wired/64/000000/chemical-storage-tank.png"/>
</div>
<div class="text">И третий</div>
</div>
</div>
<div class="line bottom-line">
<div class="line-item">
<div class="circle">
<img src="https://img.icons8.com/wired/64/000000/recycling.png"/>
</div>
<div class="text">На новой линии</div>
</div>
<div class="line-item">
<div class="circle">
<img src="https://img.icons8.com/wired/64/000000/eco-fuel.png"/>
</div>
<div class="text">Конец</div>
</div>
<div class="line-item line-item-finish">
<div class="circle"></div>
</div>
</div>
</section>