CSS实现太极图

最新推荐文章于 2024-05-11 20:33:26 发布

Pink kiki

最新推荐文章于 2024-05-11 20:33:26 发布

阅读量149

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_46607117/article/details/129451529

版权

具体思路：一个西瓜分两半左边一半右边一半上面一半下面一半

代码：

<style>
        .a {
            /* 一整个大圆(大西瓜) */
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            border-radius: 50%;
            overflow: hidden;
        }
        /* 分出左圆和右圆 大西瓜分成两个*/
        .a::before,.a::after {
            content: '';
            float: left;
            width: 250px;
            height: 500px;
        }
        .a::before {
            background-color: #fff;
        }
        .a::after {
            background-color: #000;
        }
        /* 太极的圆 上下两大圆  */
        .b,.c {
            position: absolute;
            left: 50%;
            width: 250px;
            height: 250px;
            margin-left: -125px;
            border-radius: 50%;
        }
        .b {
            top: 0;
            background-color: #fff;
        }
        .c {
            bottom: 0;
            background-color: #000;
        }
        /* 大圆内的小圆定位过去 */
        .b::before,.c::before {
            content: '';
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            left: 50%;
            margin-left: -25px;
            border-radius: 50%;
        }
        .b::before{
            background-color:black;
        }
        .c::before{
            background-color:white;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>