一.只写一个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;
}
效果如图：
