Link circles to the middle circle with CSS

Question

How can I draw a line to link all circle to the red one? I would like each circle join the red circle.

I have tried with:before and:after but as I'm new it's not easy.

Thanks.

 .circle-container { position: relative; width: 24em; height: 24em; padding: 2.8em; /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/ margin: 1.75em auto 0; }.circle-container span { display: block; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; border: dashed 1px; border-radius: 50%; }.center { background: red; }.item1 { transform: rotate(-90deg) translate(12em) rotate(90deg); }.item2 { transform: rotate(-60deg) translate(12em) rotate(60deg); }.item3 { transform: rotate(-30deg) translate(12em) rotate(30deg); }.item4 { transform: rotate(0deg) translate(12em) rotate(0deg); }.item5 { transform: rotate(30deg) translate(12em) rotate(-30deg); }.item6 { transform: rotate(60deg) translate(12em) rotate(-60deg); }.item7 { transform: rotate(90deg) translate(12em) rotate(-90deg); }

 <div class="circle-container"> <span class="center">MENU</span> <span class="item1">ITEM 1</span> <span class="item2">ITEM 2</span> <span class="item3">ITEM 3</span> <span class="item4">ITEM 4</span> <span class="item5">ITEM 5</span> <span class="item6">ITEM 6</span> <span class="item7">ITEM 7</span> </div>

Answer 1

Found these JS functions, where you pass the form and to elements, as well as a line with a predefined style:

    function adjustLine(from, to, line){
    
      var fT = from.offsetTop  + from.offsetHeight/2;
      var tT = to.offsetTop      + to.offsetHeight/2;
      var fL = from.offsetLeft + from.offsetWidth/2;
      var tL = to.offsetLeft     + to.offsetWidth/2;
      
      var CA   = Math.abs(tT - fT);
      var CO   = Math.abs(tL - fL);
      var H    = Math.sqrt(CA*CA + CO*CO);
      var ANG  = 180 / Math.PI * Math.acos( CA/H );
    
      if(tT > fT){
          var top  = (tT-fT)/2 + fT;
      }else{
          var top  = (fT-tT)/2 + tT;
      }
      if(tL > fL){
          var left = (tL-fL)/2 + fL;
      }else{
          var left = (fL-tL)/2 + tL;
      }
    
      if(( fT < tT && fL < tL) || ( tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){
        ANG *= -1;
      }
      top-= H/2;
    
      line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)';
      line.style["-moz-transform"] = 'rotate('+ ANG +'deg)';
      line.style["-ms-transform"] = 'rotate('+ ANG +'deg)';
      line.style["-o-transform"] = 'rotate('+ ANG +'deg)';
      line.style["-transform"] = 'rotate('+ ANG +'deg)';
      line.style.top    = top+'px';
      line.style.left   = left+'px';
      line.style.height = H + 'px';
    }

Link to the original project: https://jsfiddle.net/rdamasceno/o3Lroapa/5/

Answer 2

Pseudo-elements as an Extension

Note, in the provided example, the HTML has been altered for aesthetic and semantic reasons -- there is nothing wrong with your HTML (unless we are talking about aesthetics and/or semantics ).

For each .item* , add either an ::after or ::before pseudo-element styled as a 12em wide element with a visible border-bottom (simular to a <hr> ). See Figure I .

Figure I

a:not(.center)::after {
  content: "";
  display: block;
  position: absolute;
  left: -6em;
  top: 2em;
  width: 12em;
  height: 0;
  border-bottom: 0.25em solid red;
}

Then adjust each line using it's parent's first transform: rotate() value, then move the line with transform: translate() and transform-origin , see Figure II which shows how .item1::after is styled.

Figure II

.item1 {
  transform: rotate(-90deg) translate(12em) rotate(90deg);
}

.item1::after {
  transform: rotate(-90deg) translate(-7.5em, 2em);
  transform-origin: center bottom
}

Example

 nav { position: relative; width: 24em; height: 24em; padding: 2.8em; margin: 1.75em auto 0; } nav a { display: block; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; border: dashed 1px; border-radius: 50%; } a:not(.center)::after { content: ""; display: block; position: absolute; left: -6em; top: 2em; width: 12em; height: 0; border-bottom: 0.25em solid red; }.center { background: red; }.item1 { transform: rotate(-90deg) translate(12em) rotate(90deg); }.item1::after { transform: rotate(-90deg) translate(-7.5em, 2em); transform-origin: center bottom }.item2 { transform: rotate(-60deg) translate(12em) rotate(60deg); }.item2::after { transform: rotate(-60deg) translate(-6.5em, 2em); transform-origin: center bottom }.item3 { transform: rotate(-30deg) translate(12em) rotate(30deg); }.item3::after { transform: rotate(-30deg) translate(-6em, 1em); transform-origin: center }.item4 { transform: rotate(0deg) translate(12em) rotate(0deg); }.item4::after { transform: translateX(-5.75em); transform-origin: center }.item5 { transform: rotate(30deg) translate(12em) rotate(-30deg); }.item5::after { transform: rotate(30deg) translate(-6.25em, -1.5em); transform-origin: center }.item6 { transform: rotate(60deg) translate(12em) rotate(-60deg); }.item6::after { transform: rotate(60deg) translate(-6.75em, -2em); transform-origin: center }.item7 { transform: rotate(90deg) translate(12em) rotate(-90deg); }.item7::after { transform: rotate(90deg) translate(-7.75em, -2em); transform-origin: center }

 <nav> <a href="#/" class="center">MENU</a> <a href="#/" class="item1">ITEM 1</a> <a href="#/" class="item2">ITEM 2</a> <a href="#/" class="item3">ITEM 3</a> <a href="#/" class="item4">ITEM 4</a> <a href="#/" class="item5">ITEM 5</a> <a href="#/" class="item6">ITEM 6</a> <a href="#/" class="item7">ITEM 7</a> </nav>