【图形】CSS绘制阴阳八卦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【图形】CSS绘制阴阳八卦</title> <style> #yin-yang { width: 192px; height: 96px; background: #eee; border-color: red; border-style: solid; border-width: 4px 4px 100px 4px; border-radius: 100%; position: relative; margin : 20px 0 0 20px; } #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 36px solid red; border-radius: 100%; width: 24px; height: 24px; } #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 36px solid #eee; border-radius:100%; width: 24px; height: 24px; } </style> </head> <body> <div id="yin-yang"></div> </body> </html>