创建由线连接到一个主圆的CSS圆

Question

圈子的例子

我需要创建一个如图所示的页面。

绿色的主圆必须使用css和html..kindly通过线连接到2个子圆，为我提供解决方案。

Answer 1

 .left-box, .right-box { vertical-align: middle; display: inline-block; } .left-box { margin-right: 50px; } .right-box .circle + .circle { margin-top: 20px; } .circle { border-radius: 100%; background: #ed1c24; text-align: center; position: relative; display: table; height: 70px; z-index: 10; color: #fff; width: 70px; } .big-circle { background: #52883b; height: 100px; width: 100px; } .purple { background: #ec008c; } .circle .circle-content { vertical-align: middle; display: table-cell; } .circle.one:before, .circle.two:before { transform: rotate(-20deg); position: absolute; margin: 0 -5px 0 0; background: #000; width: 74px; content: ''; height: 1px; right: 100%; z-index: -1; top: 50%; } .circle.two:before { transform: rotate(20deg); } 

 <div class="left-box"> <div class="big-circle circle"> <div class="circle-content">1</div> </div> </div> <div class="right-box"> <div class="circle one"> <div class="circle-content">1.1</div> </div> <div class="circle purple two"> <div class="circle-content">1.2</div> </div> </div> 

Answer 2

用于在网页中制作圆形，请使用border-radius:50%; 为了进行连接，请根据需要使用适当的页边距。 并请下次提供代码以获得更好的帮助。

Answer 3

我发现的类似帖子之一

创建由线连接到中间主圆的CSS圆

在这种情况下，他们连接了一圈，因为连接了多个圈，但我需要按照图片