1. 太极图
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     .yinyang {
  11.       width: 120px; height: 240px;
  12.       background-color: white;
  13.       border-color: black;
  14.       border-style: solid;
  15.       border-width: 1px 121px 1px 1px;
  16.       border-radius: 50%;
  17.       position: relative;
  18.     }
  20.     .yinyang:before {
  21.       content: "";
  22.       position: absolute;
  23.       top: 50%;
  24.       left: 50%;
  25.       background-color: white;
  26.       border: 40px solid black;
  27.       border-radius: 50%;
  28.       width: 40px;
  29.       height: 40px;
  30.     }
  32.     .yinyang:after {
  33.       content: "";
  34.       position: absolute;
  35.       top: 0;
  36.       left: 50%;
  37.       background-color: black;
  38.       border: 40px solid white;
  39.       border-radius:50%;
  40.       width: 40px;
  41.       height: 40px;
  42.     }
  43.   </style>
  44. </head>
  45. <body>
  46.   <div class="yinyang"></div>
  47. </body>
  48. </html>