css绘画三角形，实现一些图形

html代码如下&＃xff1a;

主要用css的border属性来实现高度和宽度设置为0&＃xff1b;line-height和font-size也设置为0&＃xff0c;主要是解决ie6中容易被撑开的不兼容性问题

第一种斜边在盒子的边上

css代码如下

.circle {
width:0;
height:0;
border:39px solid #000;
border-color:#FF0000 transparent transparent transparent;
border-style:solid dashed dashed dashed;
line-height:0;

font-size:0;
}

由于ie6不支持透明&＃xff0c;所以样式里面用dashed来解决不透明问题

运行结果如下图&＃xff1a;

第二种是斜边在盒子的对角线上

.circle {
height: 0;
width: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color: #FF9600 #3366ff transparent transparent;
border-style: solid solid dashed dashed;
border-width: 40px 40px 0 0 ;
}