創建通過線連接到一個主圈的CSS圈

Question

circle example

我需要創建一個類似圖所示的頁面。

綠色的主要圓圈必須通過使用css和html的線連接到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

一個類似的帖子的我發現

Creating CSS circles connected by lines to middle main circle

在此它們被連接爲一個圓多個圓作爲被連接

，但我需要按照圖像