用CSS画先天八卦

<style>        .yang{            display: block;            width: 40px;            height: 8px;            background-color: black;            margin-bottom: 8px;        }        .yin{            display: block;            position: relative;            width: 40px;            height: 8px;            background-color: black;            margin-bottom: 8px;        }        .yin::after{            content: "";background-color: white;height: 10px;position: absolute;top: -1px;width: 8px;left: 16px;        }        .baguatuwai{            display: block;            position: relative;            width: 300px;            border-radius: 150px;             height: 300px;            margin: 60px auto;            margin-top:-360px;                    }        .baguatu{            display: block;            position: relative;            width: 300px;            border-radius: 150px;            border:1px solid black;            height: 300px;            margin: 60px auto;            overflow: hidden;        }

       .blackbanyuan{            position: absolute;            left: 50%;            display: block;            width: 300px;            height: 300px;            background-color: black;            border:1px solid black;        }

       .xiaobanyuanblack{            position: absolute;            top:50%;            left: 50%;            margin-left: -75px;            display: block;            width: 150px;            height: 150px;            background-color: black;            border:1px solid black;            border-radius: 50%;        }        .xiaobanyuanwhite{            position: absolute;            left: 50%;                    margin-left: -75px;            display: block;            width: 150px;            height: 150px;            background-color: white;            border:1px solid white;            border-radius: 50%;        }

       .tongxinyuanblack{            position: absolute;            top: 16.6%;            left:50%;            margin-left: -25px;            width: 50px;            height: 50px;            border-radius: 25px;            background-color: black;        }        .tongxinyuanwhite{            position: absolute;            bottom: 16.6%;            left:50%;            margin-left: -25px;            width: 50px;            height: 50px;            border-radius: 25px;            background-color: white;        }

       .yao{            position: absolute;            display: flex;flex-direction: column;        }        .qian{           left: 50%;top: -48px;margin-left: -20px;        }        .kun{            left: 50%;bottom: -56px;margin-left: -20px;        }        .zhen{            bottom: 8px;            /* Rotate div */transform:rotate(226deg);-ms-transform:rotate(226deg); /* Internet Explorer */-moz-transform:rotate(226deg); /* Firefox */-webkit-transform:rotate(226deg); /* Safari 和 Chrome */-o-transform:rotate(226deg); /* Opera */        }        .li{            top: 50%;left: -48px;margin-top: -20px;        }        .dui{          left: 8px;            /* Rotate div */transform:rotate(316deg);-ms-transform:rotate(316deg); /* Internet Explorer */-moz-transform:rotate(316deg); /* Firefox */-webkit-transform:rotate(316deg); /* Safari 和 Chrome */-o-transform:rotate(316deg); /* Opera */        }        .xuan{            right: 8px;                     /* Rotate div */transform:rotate(46deg);-ms-transform:rotate(46deg); /* Internet Explorer */-moz-transform:rotate(46deg); /* Firefox */-webkit-transform:rotate(46deg); /* Safari 和 Chrome */-o-transform:rotate(46deg); /* Opera */        }        .kan{            right: -48px;top: 50%;margin-top: -20px;        }        .gen{            right: 8px;bottom: 0px;                /* Rotate div */                transform:rotate(136deg);-ms-transform:rotate(136deg); /* Internet Explorer */-moz-transform:rotate(136deg); /* Firefox */-webkit-transform:rotate(136deg); /* Safari 和 Chrome */-o-transform:rotate(136deg); /* Opera */        }    </style>

   <div class="baguatu">        <div class="blackbanyuan"></div>        <div class="xiaobanyuanblack"></div>        <div class="xiaobanyuanwhite"></div>

       <div class="tongxinyuanblack"></div>        <div class="tongxinyuanwhite"></div>    </div>

   <div class="baguatuwai">        <div class="yao qian">            <span class="yang"></span>                        <span class="yang"></span>            <span class="yang"></span>         </div>                 <div class="yao kun">            <span class="yin"></span>            <span class="yin"></span>            <span class="yin"></span>         </div>                 <div class="yao zhen">            <span class="yin"></span>            <span class="yin"></span>            <span class="yang"></span>         </div>                 <div class="yao li">            <span class="yang"></span>            <span class="yin"></span>            <span class="yang"></span>         </div>                 <div class="yao dui">                       <span class="yin"></span>            <span class="yang"></span>            <span class="yang"></span>         </div>                      <div class="yao xuan">            <span class="yang"></span>            <span class="yang"></span>            <span class="yin"></span>          </div>         <div class="yao kan">            <span class="yin"></span>             <span class="yang"></span>            <span class="yin"></span>          </div>                 <div class="yao gen">            <span class="yang"></span>            <span class="yin"></span>                      <span class="yin"></span>          </div>        

   </div>

            <h1>先天八卦</h1>

  <div style="display: flex;"> 阳爻：<span class="yang"></span> </div>

  <div style="display: flex;"> 阴爻：<span class="yin"></span></div>

   <p>曾仕强（1935年10月20日-2018年11月11日）国学大师、中国式管理大师，全球华人中国式管理第一人，被称为“中国式管理之父”，曾任台湾交通大学教授，台湾兴国管理学院校长。</p>    

   <p>        人生只做三件事，知道此生为何而来，这是目标，知道如何完成，这是方法，知道如何做得更好，这是改善。三件事听起来简单，真正做起来并不那么容易，需要付出一生的时间和精力。

   </p>

   <p>人能弘道，非道弘人。 —论语 卫灵公        孔子说，宇宙的密码已经揭开了，等带着人把他发扬光大。    </p>    <p>

三把钥匙：1、伏羲八卦  2、文王64卦  3、孔子的周易 《十翼》    </p>    <p>        学习《易经》的意义1、纠正似是而非的观念3、具有神秘性道德性2、求同存异