一个div 实现太极八卦图

最新推荐文章于 2024-03-07 17:52:03 发布

小王_同学

最新推荐文章于 2024-03-07 17:52:03 发布

阅读量318

点赞数

本文链接：https://blog.csdn.net/weixin_38866493/article/details/104972829

版权

效果图

在这里插入图片描述

css

  <style>
        .aaa{
            width: 100px;
            height: 200px;
            background-color: #ffffff;
            position: absolute;
            top: 0;
            left: 0;
            border-color: #000000;
            border-style: solid;
            border-width: 1px 100px 1px 1px;
            border-radius: 50%;
        }
        .aaa::before {
            content: ' ';
            width: 20px;
            height: 20px;
            border: 40px solid #ffffff;
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            left: 50px;
            top: 0;
        }
        .aaa::after {
            content: '';
            background-color: #ffffff;
            width: 20px;
            height: 20px;
            border: 40px solid #000000;
            border-radius: 50%;
            position: absolute;
            left: 50px;
            bottom: 0;
        }
    </style>

html

<div class="aaa">

</div>