太极八卦（伪元素的简单使用）@慕课网原创_慕课网

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      * {
        padding: 0px;
        margin: 0px;
      }

      .box {
        width: 300px;
        height: 600px;
        border: 1px solid black;
        border-left: 300px solid black;
        border-radius: 300px;
        margin: 0 auto;
      }

      .box::before {
        content: '';
        display: block;
        width: 100px;
        height: 100px;
        background: white;
        border: 100px solid black;
        border-radius: 150px;
        margin-left: -150px;
      }

      .box::after {
        content: '';
        display: block;
        width: 100px;
        height: 100px;
        background: black;
        border: 100px solid white;
        border-radius: 150px;
        margin-left: -150px;
      }

    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>