[分享]css两个圆拼接

CSS 中可以使用伪元素和圆角技术实现两个圆拼接的效果，下面是样式代码：

.circle{
    position:relative;
    width:100px;
    height:50px;
    background-color:#409EFF;
    border-radius:25px;
    text-align:center;
    line-height:50px;
}
.circle::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background-color:#409EFF;
    border-top-left-radius:25px;
    border-bottom-left-radius:25px;
    transform:translateX(-25px);
}
.circle::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:50%;
    height:100%;
    background-color:#409EFF;
    border-top-right-radius:25px;
    border-bottom-right-radius:25px;
    transform:translateX(25px);
} 

上面的代码中， .circle 表示圆形的样式，通过设置 width 和 height 来控制圆的大小，通过设置 border-radius 来使矩形形成圆形。使用伪元素 ::before 和 ::after 来实现左右两边的拼接，使用 border-top-left-radius 和 border-bottom-left-radius 来将 ::before 的左边框角度变成圆角，使用 transform 来使 ::before 与左边的圆相连，使用 border-top-right-radius 和 border-bottom-right-radius 来将 ::after 的右边框角度变成圆角，使用 transform 来使 ::after 与右边的圆相连。