纯CSS实现的太极图
纯CSS实现的太极图:
<!DOCTYPE html> <html> <head> <title>纯CSS实现的太极图</title> <style> body {background:#eee;} #yin-yang { width: 96px; height: 48px; background: black; border-color: white; border-style: solid; border-width: 0px 0px 48px 0px; border-radius: 100%; position: relative; } #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: black; border: 18px solid white; border-radius: 100%; width: 12px; height: 12px; } #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: white; border: 18px solid black; border-radius:100%; width: 12px; height: 12px; } </style> </head> <body> <div id="yin-yang"></div> </body> </html>
点赞0
支持一下