使用CSS将圆链接到中间的圆

n8ghc7c1 于 2022-12-24 发布在其他

关注(0)|答案(2)|浏览(172)

我怎样画一条线来连接所有的圆和红色的圆呢？我想把每个圆都连接到红色的圆上。
我试过：before和：after，但因为我是新来的，这并不容易。
谢谢。

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

css

来源：https://stackoverflow.com/questions/74904934/link-circles-to-the-middle-circle-with-css

2条答案

按热度按时间

6yoyoihd1#

找到了这些JS函数，在这些函数中，您可以将form和to元素以及具有预定义样式的行传递给它们：

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/

赞(0）回复(0）举报 2022-12-24

gojuced72#

作为扩展的伪元素

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 😸).
对于每个.item*，添加一个::after或::before伪元素，样式为12em宽元素，带有可见border-bottom（类似于<hr>）。参见图I。

图一

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
}

示例

一个二个一个一个

赞(0）回复(0）举报 2022-12-24

我来回答

使用CSS将圆链接到中间的圆

2条答案

作为扩展的伪元素

图一

图二

示例

相关问题

热门标签

最新问答