一.只寫一個div,用css畫出一個太極
<div id="taiJi"></div>
1.畫出底層的大圓，分別為兩個黑白半圓
#taiJi{
width:0;
height:200px;/*設置圓的高度*/
position:relative;
margin:50px auto;
border-left:100px solid#000;/*自動填充寬度*/
border-right:100px solid#fff;/*自動填充寬度*/
box-shadow:0 0 30px rgba(0,0,0,0.5);/*邊框陰影*/
border-radius:100%;}
效果如下圖：
2.寫一個偽類，實現上下兩個黑白的小圓
#taiJi:before{
width:100px;
height:100px;
top:0;
left:-50px;/*將圓居中*/
z-index:1;
background-color:#fff;
border-radius:50%;
box-shadow:0 100px0 #000;/*實現下半的黑色半圓*/
}
效果如下圖：
3.再寫一個偽類，第二步畫出的圓基礎上再分別畫出兩個黑白的小小圓
width:30px;
height:30px;
top:35px;
left:-15px;
z-index:2;
background-color:#000;
border-radius:50%;
box-shadow:0 100px0 #fff;
}
效果如下：
4.添加動畫，將畫好的太極圖旋轉起來
#taiJi{
animation:rotation2.5s linear infinite;
-webkit-animation:rotation2.5s linear infinite;
-moz-animation:rotation2.5s linear infinite;
}
@keyframesrotation{
0%{transform:rotate(0deg);}
100%{transform:rotate(-360deg);}
}
@-webkit-keyframesrotation{
0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(-360deg);}
}
@-moz-keyframesrotation{
0%{-moz-transform:rotate(0deg);}
100%{-moz-transform:rotate(-360deg);}
}
二.css畫一個三角形
<div class="triangle"></div>
.triangle{
width: 0;
height:0;/*不設置寬高，由border的寬度填充div*/
border-left: 40px solid red;
border-right: 40px solid pink;
border-top: 40px solid black;
border-bottom:40px solid blue;
}
效果如圖：實現了四個不同顏色的三角形組成的正方形
可以根據需要將其他的方向的三角形顏色設置為透明，則可以實現不同方向的等邊三角形
例如實現朝下的三角形：
.triangle{
width: 0;
height:0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid black;
border-bottom:40px solid transparent;
}
效果如圖：
