Connect single div with multiple div around it using line

Question

I am trying to draw lines between divs similar to this:

I have tried using this, as I am new to css I am scratching my head to make divs around a single div. Can someone please help me out with this.

EDIT: I am trying to achieve this using css only so I can use answer of @James Montagne from this but in that case I will need to have separate classes for all 6 divs and 5 lines. I am not sure if it is the best way to achieve this as it might not be responsive? Please suggest.

As I mentioned I am very new to css, though I am somewhat able to make it circular https://codepen.io/anon/pen/mjXVBq (fork of codepan mentioned in my question). But I believe that is not the correct way to do it. — Shail_bee, Jul 31 '18 at 09:04

cMarius · Answer 1 · 2022-01-10T11:16:29.667

You can use a static solution like this:

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

<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>

Center element positioned absolute. Satellite elements positioned absolute around center element, Pseudo-elements inside secondary elements act as their lines. You need to play with the rotation/width/positioning for each line.

Making this responsive/dynamic requires a bit more work.

Connect single div with multiple div around it using line

1 Answers1