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>
