2点之间的Css响应线

Question

我必须在两个点之间做出响应线：

是否可以在css中在一个div中写下连接线的开头，并将其与另一个div绑定在一起？有可能在css或mabye svg？我不想只为这些行使用js。

如果块具有固定宽度，则一切正常：

＆＃13;

＆＃13;

*,
*: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);
}


/*My non-adaptive solution:*/

.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);
}

＆＃13;

<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>Text short</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>2</span></div>
    <div class=item__text>The text is a bit bigger, maybe two lines, maybe one, maybe two lines, maybe one</div>
  </div>

  <div class=item>
    <div class=item__num><span>3</span></div>
    <div class=item__text>Text is small, medium text</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>4</span></div>
    <div class=item__text>The text is a bit bigger, maybe two lines, maybe one</div>
  </div>

  <div class=item>
    <div class=item__num><span>5</span></div>
    <div class=item__text>Text is small, medium text</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>6</span></div>
    <div class=item__text>Text short</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何为响应式块提供相同的功能？

＆＃13;

＆＃13;

*,
*: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);
}


/*My non-adaptive solution:*/

.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);
}

＆＃13;

<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>Text short</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>2</span></div>
    <div class=item__text>The text is a bit bigger, maybe two lines, maybe one, maybe two lines, maybe one</div>
  </div>

  <div class=item>
    <div class=item__num><span>3</span></div>
    <div class=item__text>Text is small, medium text</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>4</span></div>
    <div class=item__text>The text is a bit bigger, maybe two lines, maybe one</div>
  </div>

  <div class=item>
    <div class=item__num><span>5</span></div>
    <div class=item__text>Text is small, medium text</div>
  </div>

  <div class=item>
    <div class="item__num item__num_lg"><span>6</span></div>
    <div class=item__text>Text short</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;