border-radius制作太极图

最新推荐文章于 2020-08-17 19:38:53 发布

s_psycho

最新推荐文章于 2020-08-17 19:38:53 发布

阅读量283

点赞数

本文链接：https://blog.csdn.net/weixin_42413689/article/details/80924576

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   *{margin: 0;
   padding: 0}
 div{width: 120px;
   height: 0px;
    border-radius: 50%;
   border-top: 60px solid red;
   border-bottom: 60px solid green;
   position: absolute;}
   .div1:before{content: "";
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: red;
   border:20px solid green; 
   position: absolute;
   margin-top: -30px}
   .div1:after{content: "";
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: green;
   border:20px solid red; 
   position: absolute;
   margin-top: -30px;
   margin-left:60px;}
   </style>
</head>
<body>
<div class="div1">
</div> 
</body>
</html>