使用 CSS 將圓圈鏈接到中間圓圈

Question

我如何畫一條線將所有圓圈連接到紅色圓圈？ 我希望每個圓圈都加入紅色圓圈。

我已經嘗試過：之前和：之后，但因為我是新手，所以這並不容易。

謝謝。

 .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

找到了這些 JS 函數，您可以在其中傳遞表單和元素，以及具有預定義樣式的行：

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

原項目鏈接： https ://jsfiddle.net/rdamasceno/o3Lroapa/5/

Answer 2

作為擴展的偽元素

請注意，在提供的示例中，出於美學和語義原因更改了 HTML——您的 HTML 沒有任何問題（除非我們談論的是美學和/或語義）。

對於每個.item* ，添加一個::after或::before偽元素，樣式為12em寬元素， border-bottom （類似於<hr> ）。 見圖一。

圖一

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

然后使用父級的第一個transform: rotate()值調整每一行，然后使用transform: translate()和transform-origin移動該行，參見圖 II ，其中顯示了.item1::after的樣式。

圖二

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

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

例子

 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>