如何用css3画三角形和圆形
通过CSS样式可以控制网页中各个元素的显示方式，通过CSS样式可以在网页中画出一个三角形，圆形等形状。（了解更多CSS知识，请学习CSS视频教程）
CSS画三角形方法
实现三角形的绘制很简单。
第一步：新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。
<div class="kailong"></div>
第二步：为盒子添加样式。
1.向上的三角形
.kailong{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
2.向下的三角形
.kailong{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-top:50px solid red;
}
3.向左的三角形
.kailong{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:50px solid red;
}
4.向右的三角形
.kailong{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:50px solid red;
}
至此css3实现三角形的绘制完成了。
CSS画圆形方法
CSS画圆形，只需要通过设置DIV的圆角边框即可。代码如下：
border-rsdius:78.5px 78.5px 78.5px 78.5px;
接下来用padding控制半径：padding:50px;还可以根据自己喜好设置背景色和边框。效果如下：
CSS画圆的CSS样式：
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
