原理
原理就是用伪类元素把线旁边添加一个border-radius弧度的和背景色相同颜色的椭圆,把内凹的弧度重叠出来。
代码
#circleline {
margin-top:25vh;
background-color: cornflowerblue;
position: relative;
opacity: 0;
padding: 10vh;
}
#circleline::before {
left: 0;
right: 0;
width: 100%;
border-radius: 50%; // 控制弧度效果 越大弧度越自然
background: #f35c5c;
content: "";
height: 10vh; // 控制椭圆高度
position: absolute; // 关键***
}