Подскажите пожалуйста, каким способом лучше сделать такую линию:
1 ответ
При помощи flexbox приблизительно так.
Прекрасно поддастся адаптации. Можно например при помощи order сместить линии в левую или правую сторону на планшетной версии. Контент внутри без проблем можно с позиционировать и подогнать под макет.
.wrapper {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.container {
display: flex;
width: 100%;
min-height: 200px
}
.container_item {
width: calc(100% - 10px);
box-sizing: border-box;
padding: 10px;
display: flex;
align-items: center;
}
.line {
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.line_item {
width: 10px;
flex-grow: 1;
background-color: #ccc;
}
.line_center {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
margin: 10px 0;
}
.line_top {
border-radius: 0 0 20px 20px;
}
.line_bottom {
border-radius: 20px 20px 0 0;
}
<div class="wrapper">
<div class="container">
<div class="container_item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto aliquid inventore cum voluptatum, porro dolores deserunt adipisci praesentium blanditiis eligendi fugiat, dolor, quidem harum quo necessitatibus doloribus officiis iure rem unde quibusdam atque esse nobis rerum voluptatibus. Tenetur tempore quod laboriosam quidem esse eos labore optio voluptatum, consequuntur est voluptate autem, mollitia facilis ex eaque?</p>
</div>
<div class="container_line line">
<div class="line_item line_top"></div>
<div class="line_center"></div>
<div class="line_item line_bottom"></div>
</div>
<div class="container_item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eligendi, magni debitis doloremque provident quibusdam!</p>
</div>
</div>
<div class="container">
<div class="container_item">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque ea labore eum illo numquam impedit voluptatem laudantium sequi beatae odio excepturi natus voluptatibus sit ratione sunt porro deleniti, fugit suscipit!</p>
</div>
<div class="container_line line">
<div class="line_item line_top"></div>
<div class="line_center"></div>
<div class="line_item line_bottom"></div>
</div>
<div class="container_item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut maiores dignissimos atque dolorum cumque, optio architecto vel maxime id. Cupiditate modi deleniti suscipit quas adipisci nostrum eos recusandae aperiam quo iure asperiores in ab quia eius inventore voluptatibus dolor saepe dolorum numquam nemo, facere veniam impedit consequuntur quam? Ex, minima!</p>
</div>
</div>
<div class="container">
<div class="container_item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab nesciunt voluptatem aut similique asperiores sint ea fugit et eligendi accusantium!</p>
</div>
<div class="container_line line">
<div class="line_item line_top"></div>
<div class="line_center"></div>
<div class="line_item line_bottom"></div>
</div>
<div class="container_item">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam iure commodi aut recusandae totam?</p>
</div>
</div>
</div>
-
@DaemonHK извините конечно, но у меня встречный вопрос, зачем псевдоэлементы и почему вы мне их навязываете? Я предложил одно из многих решений, причем достаточно универсальное, если у вас есть другие предложения, то пожалуйста, вам никто не запрещает оставить свой ответ.– Get-WebCommented 9 апр. 2018 в 11:24