Creating CSS circles connected by lines to one main circle

Question

circle example

I need to create a page something like figure shown.

The main circle which is green has to been connect to the 2 sub circle with line using css and html..kindly provide me solution.

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

for making circle in web page use border-radius:50%; for connecting use the appropriate margins as your page needed. And please next time provide the code for getting better help.

Answer 3

One of similar post i found

Creating CSS circles connected by lines to middle main circle

in this they are connecting for one circle multiple circles as been connected but i required as per the image