CSS 中可以使用伪元素和圆角技术实现两个圆拼接的效果,下面是样式代码: .circle{ position:relative; width:100px; height:50px; backgroun
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 与右边的圆相连。
粉丝
0
关注
0
收藏
0