1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>太极</title> 7 <style> 8 #yin-yang{ 9 width: 400px; 10 height: 200px; 11 background-color: #fff; 12 /* border-radius: 100%; */ 13 border-color: black; 14 margin: 100px auto; 15 border-width: 4px 4px 204px 4px; 16 border-style: solid; 17 border-radius: 100%; 18 position: relative; 19 } 20 #yin-yang::before{ 21 content: ‘‘; 22 width: 50px; 23 height: 50px; 24 background-color: #fff; 25 /* background-color: #ffffff; */ 26 position: absolute; 27 border: 75px solid #000; 28 top: 50%; 29 left:0 ; 30 border-radius: 50%; 31 /* z-index: 1; */ 32 33 } 34 #yin-yang:after{ 35 content: ‘‘; 36 width: 50px; 37 height: 50px; 38 background-color: #000; 39 /* background-color: #ffffff; */ 40 position: absolute; 41 border: 75px solid #fff; 42 top: 50%; 43 left: 50%; 44 border-radius: 50%; 45 } 46 </style> 47 </head> 48 <body> 49 <div id="yin-yang"></div> 50 </body> 51 </html>
原文：https://www.cnblogs.com/yuanxiangguang/p/11333121.html