利用css绘制太极图

最新推荐文章于 2024-08-16 10:22:35 发布

xiaochen_03

最新推荐文章于 2024-08-16 10:22:35 发布

阅读量72

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/xiaochen_03/article/details/130833903

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>太极</title>
       <style type="text/css">
           .box{
               width: 800px;
               height: 800px;
           }
           .big{
               width: 400px;
               height: 400px;
               border-radius: 50%;
               border: 5px solid black;
               background-color: black;
           }
           .left{
               background-color: white;
               width: 200px;
               height: 400px;
               border-radius: 200px 0 0 200px;
               position: relative;
           }
           .white{
               background-color: white;
               position: absolute;
               top: 0;
               left: 100px;
               width:200px ;
               height: 200px;
               border-radius: 50%;
               position: relative;
           }
           .small-1{
               position: absolute;
               top: 25%;
               left: 25%;
               width: 100px;
               height: 100px;
               border-radius: 50%;
               background-color: black;
           }
           .right{
               position: relative;
           }
           .black{
               background-color:black;
               position: absolute;
               bottom: 0;
               left: 100px;
               width:200px ;
               height: 200px;
               border-radius: 50%;
           }
           .small-2{
               position: absolute;
               top: 25%;
               left: 25%;
               width: 100px;
               height: 100px;
               border-radius: 50%;
               background-color: white;
           }
       </style>
   </head>
   <body>
       <div class="box">
           <div class="big">
               <div class="left">
                   <div class="white">
                       <div class="small-1"></div>
                   </div>
               </div>
               <div class="right">
                   <div class="black">
                       <div class="small-2"></div>
                   </div>
               </div>
           </div>
       </div>
   </body>
</html>