太极图

最新推荐文章于 2021-06-29 01:31:51 发布

Psc-Trump

最新推荐文章于 2021-06-29 01:31:51 发布

阅读量664

点赞数

分类专栏： css小案例

本文链接：https://blog.csdn.net/qq_41033308/article/details/108545050

版权

css小案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

太极图

图片如下

直接上代码简单粗暴

<style>
        body {
            background-color: #ccc;
        }
        
        div {
            position: relative;
            width: 150px;
            height: 300px;
            background-color: #fff;
            border-left: 150px solid #000;
            margin: 100px auto;
            border-radius: 50%;
        }
        
        div::before {
            position: absolute;
            height: 30px;
            width: 30px;
            border: 60px solid #000;
            background-color: #fff;
            content: '';
            left: -75px;
            border-radius: 50%;
        }
        
        div::after {
            position: absolute;
            height: 30px;
            width: 30px;
            background-color: #000;
            border: 60px solid #fff;
            content: '';
            left: -75px;
            bottom: 0px;
            border-radius: 50%;
        }
    </style