用HTML5与css做图形

用代码做圆形，圆形是通过给一个正方形添加圆角边框改变成圆形。

例如用代码先做一个400*400的正方形。

 

然后使用代码border-radius为正方形加上圆角边框，border-radius可以给四个角中的任意一个角加上圆角边框，

用border-radius为四个角同时加上200px的圆角边框就得到了圆形，如图示：

 

而200px的距离指的是下图中黑点到蓝点的距离

代码如下：

#yuanxing{width: 400px;
                height: 400px;
                background: lightgreen;
                border-radius: 200px;
            }

用HTML做扇形，先利用border属性和border-radius做一个圆形的边框，并由border-top,border-left,border-bottom,border-right分成四份，

将边框作为白色，将任意一份设置成明显颜色，就做出了扇形，如图所示：

 

代码如下：

#shanxing{width: 0;
            height: 0;
            border: 50px solid white;
            border-top-color: lightblue;
            border-radius: 50%;
            }

做三角形事啊与扇形同理，以正方形为基础，利用border属性做一个正方形的边框，并由border-top,border-left,border-bottom,border-right分成四份，

将边框作为白色，将任意一份设置成明显颜色，就做出了三角形，如图示：

 

代码如下：

#sanjiaoxing{width: 0;
            height: 0;
            border: 50px solid white;
            border-bottom-color: lightblue;
            }