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 >
    <span >MENU</span>

    <span >ITEM 1</span>
    <span >ITEM 2</span>
    <span >ITEM 3</span>
    <span >ITEM 4</span>
    <span >ITEM 5</span>
    <span >ITEM 6</span>
    <span >ITEM 7</span>
</div>

CodePudding user response：

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/

CodePudding user response：

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