border-radius製作太極圖

<!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>
發佈了49 篇原創文章 · 獲贊 3 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章