Нужно сверстать соединительные линии для таких блоков адаптивно:
Возможно ли в css
прописать начало линии в одном relative
блоке, а конец в другом? Есть ли такое решение на css
или может быть svg
? Js
не хотелось бы прикручивать только ради этих линий.
Для блока с фиксированной шириной вопросов нет, все работает как надо, если текст не будет меняться, то все ок:
*,
*:before,
*:after {
box-sizing: border-box;
}
.wrapper {
position: relative;
display: flex;
flex-wrap: wrap;
width: 500px;
margin: 1rem auto;
}
.item {
position: relative;
width: 100%;
min-height: 1px;
flex: 0 0 33.333333%;
max-width: 33.333333%;
padding: 0 1rem;
margin: 0 0 2rem
}
.item__num {
position: relative;
display: inline-block;
height: 2rem;
width: 2rem;
text-align: center;
vertical-align: middle;
border-radius: 50%;
font: 400 1.5rem/2rem sans-serif;
color: #fff;
background: cadetblue;
}
.item__num span {
position: relative;
z-index: 2;
}
.item__num_lg {
margin-top: .5rem;
height: 3rem;
width: 3rem;
font: 400 2.5rem/3rem sans-serif;
}
.item__text {
position: relative;
z-index: 3;
display: block;
padding: 1rem;
margin: .5rem -1rem 0;
font: 400 1rem/1.4 sans-serif;
color: gray;
background: rgba(255, 255, 255, 0.8);
}
/*мое не адаптивное решение:*/
.item__num:before {
content: '';
position: absolute;
z-index: 1;
height: .5rem;
background: cadetblue;
}
.wrapper .item:nth-child(1) .item__num:before {
top: 1.25rem;
left: 50%;
width: 166px;
transform: rotate(7deg);
}
.wrapper .item:nth-child(2) .item__num:before {
top: .75rem;
left: 50%;
width: 166px;
transform: rotate(-7deg);
}
.wrapper .item:nth-child(4) .item__num:before {
top: -93px;
left: -46px;
width: 300px;
transform: rotate(-55deg);
}
.wrapper .item:nth-child(5) .item__num:before {
top: 1.25rem;
left: 50%;
width: 166px;
transform: rotate(7deg);
}
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" />
<div class=wrapper>
<div class=item>
<div class=item__num><span>1</span></div>
<div class=item__text>Текст короткий</div>
</div>
<div class=item>
<div class="item__num item__num_lg"><span>2</span></div>
<div class=item__text>Текст немного побольше, возможно в две строки, возможно в одну</div>
</div>
<div class=item>
<div class=item__num><span>3</span></div>
<div class=item__text>Текст небольшой, средний текст</div>
</div>
<div class=item>
<div class="item__num item__num_lg"><span>4</span></div>
<div class=item__text>Текст немного побольше, возможно в две строки, возможно в одну</div>
</div>
<div class=item>
<div class=item__num><span>5</span></div>
<div class=item__text>Текст небольшой, средний текст</div>
</div>
<div class=item>
<div class="item__num item__num_lg"><span>6</span></div>
<div class=item__text>Текст короткий</div>
</div>
</div>
Как сделать тоже самое для адаптивных блоков?
*,
*:before,
*:after {
box-sizing: border-box;
}
.wrapper {
position: relative;
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 1rem auto;
}
.item {
position: relative;
width: 100%;
min-height: 1px;
flex: 0 0 33.333333%;
max-width: 33.333333%;
padding: 0 1rem;
margin: 0 0 2rem
}
.item__num {
position: relative;
display: inline-block;
height: 2rem;
width: 2rem;
text-align: center;
vertical-align: middle;
border-radius: 50%;
font: 400 1.5rem/2rem sans-serif;
color: #fff;
background: cadetblue;
}
.item__num span {
position: relative;
z-index: 2;
}
.item__num_lg {
margin-top: .5rem;
height: 3rem;
width: 3rem;
font: 400 2.5rem/3rem sans-serif;
}
.item__text {
position: relative;
z-index: 3;
display: block;
padding: 1rem;
margin: .5rem -1rem 0;
font: 400 1rem/1.4 sans-serif;
color: gray;
background: rgba(255, 255, 255, 0.8);
}
/*мое не адаптивное решение:*/
.item__num:before {
content: '';
position: absolute;
z-index: 1;
height: .5rem;
background: cadetblue;
}
.wrapper .item:nth-child(1) .item__num:before {
top: 1.25rem;
left: 50%;
width: 166px;
transform: rotate(7deg);
}
.wrapper .item:nth-child(2) .item__num:before {
top: .75rem;
left: 50%;
width: 166px;
transform: rotate(-7deg);
}
.wrapper .item:nth-child(4) .item__num:before {
top: -93px;
left: -46px;
width: 300px;
transform: rotate(-55deg);
}
.wrapper .item:nth-child(5) .item__num:before {
top: 1.25rem;
left: 50%;
width: 166px;
transform: rotate(7deg);
}
<link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet" />
<div class=wrapper>
<div class=item>
<div class=item__num><span>1</span></div>
<div class=item__text>Текст короткий</div>
</div>
<div class=item>
<div class="item__num item__num_lg"><span>2</span></div>
<div class=item__text>Текст немного побольше, возможно в две строки, возможно в одну</div>
</div>
<div class=item>
<div class=item__num><span>3</span></div>
<div class=item__text>Текст небольшой, средний текст</div>
</div>
<div class=item>
<div class="item__num item__num_lg"><span>4</span></div>
<div class=item__text>Текст немного побольше, возможно в две строки, возможно в одну</div>
</div>
<div class=item>
<div class=item__num><span>5</span></div>
<div class=item__text>Текст небольшой, средний текст</div>
</div>
<div class=item>
<div class="item__num item__num_lg"><span>6</span></div>
<div class=item__text>Текст короткий</div>
</div>
</div>
CSS
, все равно при изменении масштаба колесиком мышки, верстка "поплывет". Думаюswg
илиcanvas
- самые малогеморные варианты. Но текст будет уменьшаться вместе с сужением страницы