Как сделать соединительную линию под наклоном между двумя точками?
1,00
р.
Нужно сверстать соединительные линии для таких блоков адаптивно:
Возможно ли в 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) }
Как сделать тоже самое для адаптивных блоков?
*, *: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) }
Ответ
Например, комбинируя с svg и с jquery:
function Line(){ var wrap = $('.wrap') var item1 = wrap.find('.item').eq(0), num1 = item1.find('.num'), num1X = num1.offset().left+num1.width()/2, num1Y = num1.offset().top+num1.height()/2 var item2 = wrap.find('.item').eq(1), num2 = item2.find('.num'), num2X = num2.offset().left+num2.width()/2, num2Y = num2.offset().top+num2.height()/2 var item3 = wrap.find('.item').eq(2), num3 = item3.find('.num'), num3X = num3.offset().left+num3.width()/2, num3Y = num3.offset().top+num3.height()/2 var item4 = wrap.find('.item').eq(3), num4 = item4.find('.num'), num4X = num4.offset().left+num4.width()/2, num4Y = num4.offset().top+num4.height()/2 var item5 = wrap.find('.item').eq(4), num5 = item5.find('.num'), num5X = num5.offset().left+num5.width()/2, num5Y = num5.offset().top+num5.height()/2 var item6 = wrap.find('.item').eq(5), num6 = item6.find('.num'), num6X = num6.offset().left+num6.width()/2, num6Y = num6.offset().top+num6.height()/2 var svg = $('#svg-line') var line12 = svg.find('.line-1-2'), line23 = svg.find('.line-2-3'), line24 = svg.find('.line-2-4'), line56 = svg.find('.line-5-6') line12.attr({'x1': num1X, 'y1': num1Y, 'x2': num2X, 'y2': num2Y}) line23.attr({'x1': num2X, 'y1': num2Y, 'x2': num3X, 'y2': num3Y}) line24.attr({'x1': num2X, 'y1': num2Y, 'x2': num4X, 'y2': num4Y}) line56.attr({'x1': num5X, 'y1': num5Y, 'x2': num6X, 'y2': num6Y}) } $(window).on('load resize', function () { Line() }) * { box-sizing: border-box } body { padding: 0 margin: 0 width: 100% height: 100% } .num { display: inline-block background: #5f9ea0 color: #fff font-style: normal text-align: center border-radius: 50% flex-shrink: 0 } .text { color: #555 display: block margin: 1rem 0 } .item:nth-of-type(1) .num { width: 25px height: 25px line-height: 25px } .item:nth-of-type(2) .num { width: 50px height: 50px line-height: 50px } .item:nth-of-type(3) .num { width: 30px height: 30px line-height: 30px } .item:nth-of-type(4) .num { width: 55px height: 55px line-height: 55px } .item:nth-of-type(5) .num { width: 25px height: 25px line-height: 25px } .item:nth-of-type(6) .num { width: 60px height: 60px line-height: 60px } .item { width: 33.33% padding: 0 1rem position: relative display: flex flex-flow: column wrap } .wrap-line { display: flex flex-flow: row wrap height: 600px position: relative z-index: 3 } .item:nth-of-type(2) { margin-top: 30px } .item:nth-of-type(5) { margin-top: -30px } .line { stroke: #5f9ea0 } .wrap { position: relative } #svg-line { position: absolute left: 0 right: 0 top: 0 bottom: 0 width: 100% height: 100% z-index: 2 } @media (max-width: 420px){ .wrap-line { flex-flow: column wrap } .item { width: 100% flex-flow: row nowrap padding: 1rem 0 align-items: center } .item:nth-of-type(2) { margin-left: 30px } .text { margin: 0 margin-left: 1rem } }
CodePen
Возможно ли в 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) }
1
Текст короткий
2
Текст немного побольше, возможно в две строки, возможно в одну
3
Текст небольшой, средний текст
4
Текст немного побольше, возможно в две строки, возможно в одну
5
Текст небольшой, средний текст
6
Текст короткий
Как сделать тоже самое для адаптивных блоков?
*, *: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) }
1
Текст короткий
2
Текст немного побольше, возможно в две строки, возможно в одну
3
Текст небольшой, средний текст
4
Текст немного побольше, возможно в две строки, возможно в одну
5
Текст небольшой, средний текст
6
Текст короткий
Ответ
Например, комбинируя с svg и с jquery:
function Line(){ var wrap = $('.wrap') var item1 = wrap.find('.item').eq(0), num1 = item1.find('.num'), num1X = num1.offset().left+num1.width()/2, num1Y = num1.offset().top+num1.height()/2 var item2 = wrap.find('.item').eq(1), num2 = item2.find('.num'), num2X = num2.offset().left+num2.width()/2, num2Y = num2.offset().top+num2.height()/2 var item3 = wrap.find('.item').eq(2), num3 = item3.find('.num'), num3X = num3.offset().left+num3.width()/2, num3Y = num3.offset().top+num3.height()/2 var item4 = wrap.find('.item').eq(3), num4 = item4.find('.num'), num4X = num4.offset().left+num4.width()/2, num4Y = num4.offset().top+num4.height()/2 var item5 = wrap.find('.item').eq(4), num5 = item5.find('.num'), num5X = num5.offset().left+num5.width()/2, num5Y = num5.offset().top+num5.height()/2 var item6 = wrap.find('.item').eq(5), num6 = item6.find('.num'), num6X = num6.offset().left+num6.width()/2, num6Y = num6.offset().top+num6.height()/2 var svg = $('#svg-line') var line12 = svg.find('.line-1-2'), line23 = svg.find('.line-2-3'), line24 = svg.find('.line-2-4'), line56 = svg.find('.line-5-6') line12.attr({'x1': num1X, 'y1': num1Y, 'x2': num2X, 'y2': num2Y}) line23.attr({'x1': num2X, 'y1': num2Y, 'x2': num3X, 'y2': num3Y}) line24.attr({'x1': num2X, 'y1': num2Y, 'x2': num4X, 'y2': num4Y}) line56.attr({'x1': num5X, 'y1': num5Y, 'x2': num6X, 'y2': num6Y}) } $(window).on('load resize', function () { Line() }) * { box-sizing: border-box } body { padding: 0 margin: 0 width: 100% height: 100% } .num { display: inline-block background: #5f9ea0 color: #fff font-style: normal text-align: center border-radius: 50% flex-shrink: 0 } .text { color: #555 display: block margin: 1rem 0 } .item:nth-of-type(1) .num { width: 25px height: 25px line-height: 25px } .item:nth-of-type(2) .num { width: 50px height: 50px line-height: 50px } .item:nth-of-type(3) .num { width: 30px height: 30px line-height: 30px } .item:nth-of-type(4) .num { width: 55px height: 55px line-height: 55px } .item:nth-of-type(5) .num { width: 25px height: 25px line-height: 25px } .item:nth-of-type(6) .num { width: 60px height: 60px line-height: 60px } .item { width: 33.33% padding: 0 1rem position: relative display: flex flex-flow: column wrap } .wrap-line { display: flex flex-flow: row wrap height: 600px position: relative z-index: 3 } .item:nth-of-type(2) { margin-top: 30px } .item:nth-of-type(5) { margin-top: -30px } .line { stroke: #5f9ea0 } .wrap { position: relative } #svg-line { position: absolute left: 0 right: 0 top: 0 bottom: 0 width: 100% height: 100% z-index: 2 } @media (max-width: 420px){ .wrap-line { flex-flow: column wrap } .item { width: 100% flex-flow: row nowrap padding: 1rem 0 align-items: center } .item:nth-of-type(2) { margin-left: 30px } .text { margin: 0 margin-left: 1rem } }
1 Lorem ipsum.
2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, atque.
3 Lorem ipsum dolor sit.
4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nihil, obcaecati autem!
5 Lorem ipsum dolor sit.
6 Lorem.
CodePen
