最佳答案
.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>
关于javascript - 创建由线连接到一个主圆的 CSS 圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37432832/