css--三角形 &太极

一.只写一个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;

}

效果如图：