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>