使用CSS的polygon属性画半圆环（各个方向）

轻叹年华逝，

已于 2023-07-07 13:49:54 修改

阅读量4.9k

点赞数 2

分类专栏： CSS3 文章标签： css

于 2023-06-20 13:58:41 首次发布

本文链接：https://blog.csdn.net/qq_43958325/article/details/131305348

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章介绍了CSS中的polygon函数，它用于定义多边形形状。通过调整参数，可以创建各种图形，如半圆环。示例代码展示了如何利用polygon函数来实现不同部分的圆环效果，调整border属性可以改变图形的厚度，而width和height则影响图形的大小。

摘要由CSDN通过智能技术生成

CSS的polygon属性

CSS polygon()函数是一个图形函数，用于指定某种基本图形类型。polygon()函数用于定义一个多边形

.container{
        width: 50px;
        height: 50px;
        border: 13px solid #0c73fe;
        border-radius: 50px;
        /* 上半圆环 */
        clip-path: polygon(100% 50%, 0 50%, 0 0, 100% 0); 
        /* 下半圆环 */
        /* clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); */
        /* 左半圆环 */
        /* clip-path: polygon(50% 0, 100% 0, 100% 3600%, 50% 50%); */
        /* 左半圆环 */
        /* clip-path: polygon(50% 100%, 0 100%, 0 -3600%, 50% 50%); */
    }