css画图

原理是利用边框实现，好处是不用加载图片，节省流量；坏处就是会有很长一段css样式

基本：1.设置width,height为0 ，然后设置一个border-width

利用border可以画很多有趣的图

 

 

1.正方形

#square{
	width:0px;
	height:0px;
	border-width: 100px;
	border-style: solid;
	border-color: blue red green yellow;
}

2.三角形：设置其他边颜色为透明值transparent

#triangle{
	width: 0px;
	height: 0px;
	border-width: 100px;
	border-style: solid;
	border-color: blue transparent transparent transparent;
}

3.圆形：设置圆角属性border-radius

#circle{
	width:0px;
	height:0px;
	border-width: 100px;
	border-style: solid;
	border-color: blue red green yellow;
	border-radius: 100px;
}

4.扇形：同理设置透明色

#fan{
	width: 0px;
	height: 0px;
	border-width: 100px;
	border-style: solid;
	border-color: transparent transparent transparent yellow;
	border-radius: 100px;
}

5.同心圆:在圆的基础上添加width/height值

#circle-circle{
	width: 200px;
	height: 200px;
	border: 50px solid red;
	border-radius: 200px;
}

5.半圆：利用border-radius分别设置左上角，右上角，右下角，左下角的值

#circle-half{
	width: 200px;
	height: 100px;
	background-color: red;
	/*border-color: red;*/
	/*border-style: solid;*/
	border-radius: 100px 100px 0 0;
}

6.四分之一圆：同半圆原理

#circle-double-half{
	width: 200px;
	height: 200px;
	background-color: red;
	border-radius: 200px 0 0 0;
}

7.小尾巴 :主要是在半圆的基础上添加某一侧的Border，border-top,border-right,border-left,border-bottom,大家阔以动手试一试

#tail{
	width: 100px;
	height: 100px;
	border-radius: 100px 0 0 0;
	border-top:30px solid red;
	/*border-radius: 0 100px 0 0;
	border-top: 30px solid red;*/
}

 8.提示框:用到了:after伪类去实现小尾巴的功能

#pop{
	margin-top: 20px;
	width: 400px;
	height: 200px;
	border-radius: 20px;
	background-color: red;
	position: relative;
}
#pop:after{
	content: "";
	height: 100px;
	width:100px;
	border-radius: 0 0 200px 0;
	border-right: 50px solid red;
	position: absolute;
	top:180px;
}

9.椭圆:这里用到border-radius: 100px / 50px,其中"/"前面的表示水平半径(其值为width/2)，后面的表示垂直半径（其值为height/2）.

#ellipse{
	margin-top: 20px;
	width: 200px;
	height: 100px;
	border-radius: 100px/50px;
	background-color: red;
}

10.梯形：主要是理解Border属性，也就是第一幅图，梯形就比较容易画了

#trapezium {
	height: 0;
	width: 200px;
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;

}

11.菱形：主要是用到旋转transform，不过要考虑到浏览器内核不同，要实现兼容，我这里就省略了

#diamond {
	width: 100px;
	height: 100px;
	background-color: red;
	transform:rotate(-45deg);
}

12.平行四边形：也是主要用到transform,但菱形用的是skew,倾斜

#parallelogram {
	width:160px;
	height: 100px;
	background-color: red;
	transform:skew(30deg);
}

13.五角星：主要是画三个三角形，通过旋转，然后拼接成一个五角星,各种画法自己去体会.....（可以通过不同的三角形去拼接，但原理是一样的）

#star{
	width: 0;
	height: 0;
	color: red;
	position: relative;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 70px solid red;
	transform:rotate(35deg);
}
#star:before{
        content: '';
	width: 0;
	height: 0;
	position: absolute;
	border-bottom: 80px solid red;
        border-left: 30px solid transparent;
    	border-right: 30px solid transparent;
    	top:-50px;
    	left:-60px;
    	transform:rotate(-35deg);
}
#star:after{
        content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	border-top: 70px solid red;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	left:-100px;
	transform:rotate(110deg);
}

14：爱心：用菱形和胶囊拼接一个爱心形

#love{
	position: relative;
	width: 100px;
	height: 100px;
	background-color: red;
	transform:rotate(45deg);
}
#love:before{
	position: absolute;
	left: -75px;
	content: "";
	width: 80px;
	height: 100px;
	background: red;
	border-radius: 50px 0 0 50px;
}
#love:after{
	position: absolute;
	left: 10px;
	top:-85px;
	content: "";
	width: 80px;
	height: 100px;
	background: red;
	border-radius:0 50px 50px 0;
	transform:rotate(-90deg);
}