热门：华为支持参数分辨率解决方法控制属性启动升级错误平台推荐步骤模式查询运行空间文件夹鼠标图标重启激活联想检查状态应用程序

Div实现太极效果

2023-04-13 11:42:41

Div实现太极效果

 

利用div+css实现简单的太极效果

<style>

   .taiji{border-left: 100px solid white;

        border-right: 100px solid black;

        box-shadow: 0 0 5px black;height: 200px;

        width: 0;margin: 0 auto;

        border-radius: 100px;position:relative;}

    .taiji:before{content:  "";

        width: 100px;height: 100px;position: absolute;

        top: 0; left:-50px;background-color: black;border-radius:50px;

        box-shadow: 0 100px 0 white;}

    .taiji:after{content: "";width: 25px;height: 25px;

        position: absolute;top: 40px;left: -20px;

        background-color:white;border-radius: 25px;

        box-shadow: 0 100px 0 black;}

    </style>

<div class="taiji"></div>
DIV+CSS太极效果利用简单taiji

推荐阅读