AI智能
改变未来

CSS实现太极图效果

记得要先生成一个div盒子才会有效果

<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>
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » CSS实现太极图效果