創建由線連接到一個主圓的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圓

在這種情況下，他們連接了一圈，因為連接了多個圈，但我需要按照圖片