html代码如下:<div class="circle"></div>

  主要用css的border属性来实现高度和宽度设置为0;line-height和font-size也设置为0,主要是解决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不支持透明,所以样式里面用dashed来解决不透明问题

运行结果如下图:

css绘画三角形,实现一些图形_class

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

.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 ;
}

css绘画三角形,实现一些图形_css_02