使用线将单个div与周围的多个div连接

Question

我正在尝试在div之间绘制类似于以下内容的线：

我尝试使用this，因为我是CSS的新手，所以我挠头想让div围绕一个div。有人可以帮我吗？

编辑：我仅尝试使用CSS来实现此目的，因此我可以使用this中@James Montagne的答案，但在这种情况下，我将需要为所有6个课程分别设置类divs和5行。我不确定这是否是实现此目标的最佳方法，因为它可能没有响应能力？请提出建议。

Answer 1

您可以在此处使用像我这样的静态解决方案：https://codepen.io/anon/pen/jpZqWE

<div class="boxParent">
  <div class="boxCenter">TEST</div>
  <div class="boxItem" data-boxItem-index="1">1</div>
  <div class="boxItem" data-boxItem-index="2">2</div>
  <div class="boxItem" data-boxItem-index="3">3</div>
</div>

<style>
.boxParent{
  position: relative;
  width: 500px;
  height: 500px;
  margin: auto;
  text-align: center;
}
.boxCenter{
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border:1px solid #000000;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #808080;
}
.boxItem { 
  display: inline-block;
  border: 1px solid black;
  padding: 1em;
  position: absolute;
  background: #ffffff;
}
.boxItem[data-boxItem-index]:after{
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  height: 1px;
  border-top: 1px solid #000000;
}
.boxItem[data-boxItem-index='1']{
  top: 40%;
  left: 10%;
}
.boxItem[data-boxItem-index='1']:after{
  width: 200px;
  transform: rotate(5deg);
}
.boxItem[data-boxItem-index='2']{
  top: 10%;
  left: 60%;
}
.boxItem[data-boxItem-index='2']:after{
  width: 200px;
  transform: rotate(113deg);
  top: 120px;
  left: -120px;
}
.boxItem[data-boxItem-index='3']{
  top: 80%;
  left: 40%;
}
.boxItem[data-boxItem-index='3']:after{
  width: 200px;
  transform: rotate(96deg);
  top: -60px;
  left: -70px;
}
</style>

中心元素位于绝对位置。卫星元素绝对位于中心元素周围，辅助元素内部的伪元素充当其线。您需要使用每行的旋转/宽度/位置。

做出这种响应/动态需要更多的工作。