CSS画圆圈用线连接
画圆圈中间有数字1.2.3.之间用线连接
1画圆
.circle1_circle{
/*border-radius: 50%; */
display: inline-block;
width: 40px;
height: 40px;
background: #FFFFFF;
border: 2px solid #05BBC9;
box-sizing: border-box;
border-radius: 27px;
vertical-align: middle;
}
边框的弧度时画圆的关键 border-radius: 27px;可以改成
border-radius: 50%;
设置边框的颜色和粗细,圆就变成圆圈border: 2px solid #05BBC9;
2,圆里的数字
.circle1_1{
display: block;
text-align: center;
width: 35px;
height: 28px;
font-family: PingFang SC;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 35px;
vertical-align: middle;
color: #05BBC9;
}
## 用线连接
display: inline-block;
width: 220px;
/*transform: translate(200px,300px)rotate(0deg);*/
transform-origin: center;
height: 2px;
left: 1029px;
top: 342px;
background: #D7E4E9;
border-radius: 6px;
}