css3实现一边实心一边空心的圆

最新推荐文章于 2023-11-04 11:41:09 发布

划船不用桨--

最新推荐文章于 2023-11-04 11:41:09 发布

阅读量600

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_43663349/article/details/121772605

版权

实现效果如图
原理：利用border-left/border-right和border-radius，总宽度为div宽度+左边框宽度，半径是总宽度的一半
代码如下

<style>
        div{
            width: 100px;
            height: 200px;
            border: 1px solid pink;
            border-left: 100px solid pink;
            border-radius: 100px;
            
        }
</style>


<body>
    <div>

    </div>
    
</body>