Как правильно сверстать эту секцию на CSS ?
-
Может сделать пункты в виде изображений, а текст как обычно? – FotonPC 15 янв в 14:24
-
А как сделать стрелки между блоками? – Роман Романович 15 янв в 14:26
-
сделать фотку для одной стрелочки, а потом разместить её в трех разных местах – FotonPC 15 янв в 14:28
-
4 блока позишен релетив, а картинку пнг/свг позишн абсолют выровнять как на фото – RavenTheX 15 янв в 14:55
-
Во-первых, а зачем на css, почему бы не взять svg? Во-вторых, требуется ли какая-нибудь резиновость-адаптивность? – andreymal 15 янв в 15:03
2 ответа
Что-то подобное как-то уже было в вопросе Как правильно разместить такие стрелки?
Вот пример реализации вашей задачи:
div {
display: inline-block;
width: 100px;
height: 100px;
margin: 50px 20px 0 20px;
border: 1px solid lightgray;
border-radius: 100%;
line-height: 100px;
text-align: center;
color: cadetblue;
}
.arrow {
position: absolute;
width: 100px;
height: 100px;
border: 1px dotted cadetblue;
border-color: transparent transparent transparent cadetblue;
}
.arrow_top {
top: -5px;
transform: rotate(90deg);
}
.arrow_bottom {
top: 20px;
transform: rotate(270deg);
}
.arrow:before {
content: "";
display: block;
position: absolute;
top: 10px;
left: 10px;
width: 7px;
height: 7px;
border-top: 1px solid cadetblue;
border-right: 1px solid cadetblue;
background: linear-gradient(45deg, transparent 50%, cadetblue 50%);
}
.arrow:after {
content: "";
display: block;
position: absolute;
bottom: 10px;
left: 10px;
width: 7px;
height: 7px;
border-bottom: 1px solid cadetblue;
border-right: 1px solid cadetblue;
background: linear-gradient(135deg, transparent 50%, cadetblue 50%);
}
<div>1<div class="arrow arrow_top"></div></div>
<div>2<div class="arrow arrow_bottom"></div></div>
<div>3<div class="arrow arrow_top"></div></div>
<div>4</div>
-
-
Привет! Почему, я всё так у тебя написал, а стрелки ровные или не появляются? Непоняно) – Роман Романович 17 янв в 17:04
-
-
всё есть, спасибо! мне просто практика надо, локально на ноуте. А можно линии сделать как-то адаптивность? – Роман Романович 18 янв в 8:07
Я бы делал все списком. Для начала сверстать все без пунктирных линий. Главному блоку ul дать свойства:
ul {
display: flex;
flex-wrap: wrap; /* если при адаптации блоки должны переходить на новую строку */
justify-content: space-evenly;
}
А уже каждому дочернему блоку:
ul > li {
margin-top: /* чтобы на маленьких экранах между вертикальными блоками сверху и снизу было расстояние */
padding: /* мин. расстояние между блоками справа и слева, чтобы не слипались по горизонтали */
/* ... */
}
Изображения внутри ободков делать через background, так как они декоративные, а не контентные.
Далее для добавления пунктирных линий я бы воспользовался псевдоэлементами:
ul > li::after {
content: "";
background: url(svg картинка линии);
background-size: 200px 50px;
background-position:
}
Еще можно transform: translate() воспользоваться, если background-position не сработает.
Как можно заметить, положение четных и нечетных линий разное, поэтому можно не давать им классы, а воспользоваться псевдоклассами:
ul > li::after:nth-child(even/odd)
P.S. Дополните и отредактируйте мой ответ, пожалуйста, желательно профессионалы