css太极图

最新推荐文章于 2023-04-22 13:30:32 发布

Sunyiban

最新推荐文章于 2023-04-22 13:30:32 发布

阅读量756

点赞数

分类专栏：工作记录

本文链接：https://blog.youkuaiyun.com/u011594442/article/details/50424879

版权

工作记录专栏收录该内容

19 篇文章

订阅专栏

body {background: gray;}
#yin-yang {
    width: 96px;
    height: 48px;
    background: #000;
    border-color: white;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}

#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #fff;
    border: 18px solid black;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: black;
    border: 18px solid #fff;
    border-radius:100%;
    width: 12px;
    height: 12px;
}