主页 / 问题 / 704408
Accepted
kizoso
Asked:2020-08-10 18:56:00 +0000 UTC2020-08-10 18:56:00 +0000 UTC

如何在两点之间以一定角度制作连接线？

  • 772

有必要为这些块自适应地布置连接线：

布局

是否可以将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>

html

1 个回答

  1. Best Answer

    例如，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;
  }
}
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
<div class="wrap">
    
  <div class="wrap-line">

    <div class="item">
      <i class="num">1</i>
      <span class="text">
        Lorem ipsum.
      </span>
    </div>

    <div class="item">
      <i class="num">2</i>
      <span class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, atque.
      </span>
    </div>

    <div class="item">
      <i class="num">3</i>
      <span class="text">
        Lorem ipsum dolor sit.
      </span>
    </div> 


    <div class="item">
      <i class="num">4</i>
      <span class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nihil, obcaecati autem!
      </span>
    </div>

    <div class="item">
      <i class="num">5</i>
      <span class="text">
        Lorem ipsum dolor sit.
      </span>
    </div>

    <div class="item">
      <i class="num">6</i>
      <span class="text">
        Lorem.
      </span>
    </div>
  </div>
  
  
   <svg id="svg-line">    	
    <line x1="0" y1="0" x2="100" y2="0" stroke-width="10" class="line line-1-2"/>
    <line x1="0" y1="0" x2="100" y2="0" stroke-width="10" class="line line-2-3"/>
    <line x1="0" y1="0" x2="100" y2="0" stroke-width="10" class="line line-2-4"/>
    <line x1="0" y1="0" x2="100" y2="0" stroke-width="10" class="line line-5-6"/>
  </svg>
</div>

    代码笔

    • 8

相关问题