一、css 绘制太极图标

二、效果

三、代码

css" style="box-sizing: border-box; font-size: 12px; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; margin-bottom: 20px; overflow: auto; overflow-wrap: normal; word-break: break-all; border-radius: 4px; padding: 1em 1em 1em 3.8em; line-height: 1.5; color: rgb(204, 204, 204); background-color: rgb(45, 45, 45); tab-size: 4; hyphens: none; position: relative; counter-reset: linenumber 0;">#yin-yang{
         width: 96px;
         height: 48px; 
         background-color: #fff;
         border-color: red;
         border-style: solid;
         border-width: 2px 2px 50px 2px;
         border-radius: 100%;
         position: relative; 
         }
         
#yin-yang:before {
         width: 12px;
         height: 12px;
         top: 50%; 
         left: 0;
         content: "";
         position: absolute;
         background-color: #fff;
         border: 18px solid red;
         border-radius: 100%;
         }
 #yin-yang:after {
          width: 12px;
          height: 12px;
          top: 50%;
          left: 50%;
          background-color: red;
          border: 18px solid #fff;
          border-radius:100%;
          content: "";
          position: absolute;
          }

转载请注明：谷谷点程序 » css 绘制太极图标