css图形

在网页中，我们经常看到各种图形效果。一般在这种情况下我们都会通过图片来实现，但是每一次都是使用图片的话，将会导致数据传输量过大，并且一张图片会引发一次HTTP请求，这两个方面都会影响页面加载速度。如果利用css样式来实现图片效果，就能极大地减少网页加载时间。

一、三角形：

当我们为每一条边框定义不同颜色，并且设置足够大的宽度，同时把width和height设置0.就可以得到一个对角线相连的正方形。此时，如果我们把上，右，左的边框设为transparent，就能得到一个方向指向上的三角形。如果要实现带边框的三角形，就要用两个三角形，一个外层，一个内层，两个三角形之间只相差一个像素。。

eg：

#triangle{
position:relative;
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:transparent transparent black transparent;
}

#triangle div{
position:absolute;
top:-29px;;
left:-29px;
width:0;
height:0;
border-width:29px;
border-style:solid;
border-color:transparent transparent #BBFFEE transparent;
}

　　说明：在定位布局的时候，我们会发现为什么top和left是-29px而不是top为1px，left为0呢？因为子元素的绝对定位是根据父元素的“内容边界”进行定位的，由于盒子width和height都是0，因此content是在盒子中心。所以才会是使用上面的布局。如果要实现带有三角形的对话框，则要把外层三角形和内层三角形作为一个整体相对于对话框来进行定位。

二、圆：

1.css实现圆角

要制作出圆形，首先需要知道一个属性：border-raidus，这个是属性可以设置圆角半径。我们先来看看它的用法：

（1）border-radius设置一个值：表示四个角的圆角半径都是10px

（2）设置两个值：如border-radius:10px 20px;表示左上角和右下角的圆角半径是10px，右上角和左下角的圆角半径是20px（即两条对角线）

（3）设置三个值：如border-radius：10px 20px 30px；表示左上角是10px，右上角和左下角的圆角半径都是20px，右下角圆角半径是30px。

（4）设置四个值：按照顺时针方向赋值。

2.css实现半圆：

假如我们要制作上半圆，只要把height设为宽度width的一半，并且左上角和右上角的圆角半径定义与元素的高度(宽度)一致，而右下角和左下角的圆角半径设定为0即可。

3.css实现圆：

和制作半圆的语法相似，我们只需要把元素的高度和宽度定义为相同值就可以了。

4.css实现椭圆：

语法;border-radius:x/y；

说明：x表示圆角的水平半径，y表示圆角的垂直半径。当两者相等则图形为圆，否则为椭圆。