只用一個div畫一個太極圖
阿新 • • 發佈：2019-02-11
如題，最近學習css3的時候，比著葫蘆畫瓢，畫了個太極圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> body { background-color: #abcdef; } #taiji { width: 0px; height: 600px; border-left: 300px solid black; border-right: 300px solid white; border-radius: 100%; } #taiji::before { content: ''; display: block; width: 100px; height: 100px; border: 100px solid black; border-radius: 100%; background-color: white; margin-left: -150px; } #taiji::after { content: ''; display: block; width: 100px; height: 100px; border: 100px solid white; border-radius: 100%; background-color: black; margin-left: -150px; } </style> <body> <div id="taiji"> </div> </body> </html>
