css画三角形

效果图：

对应css：

<style type="text/css">
    div{
        width: 0;
        height: 0;
        margin: 10px;
        border: 50px solid;
        line-height: 0; /*兼容ie6(ie6下行高导致左右为梯形)*/
    }
    .triangle_up{
        border-color: transparent transparent orange transparent;
    }
    .triangle_down{
        border-color: orange transparent transparent transparent;
    }
    .triangle_left{
        border-color: transparent orange transparent transparent;
    }
    .triangle_right{
        border-color: transparent transparent transparent orange;
    }
    .triangle_upleft{
        border-color: orange transparent transparent orange;
    }
    .triangle_upright{
        border-color: orange orange transparent transparent;
    }
    .triangle_downleft{
        border-color: transparent transparent orange orange;
    }
    .triangle_downright{
        border-color: transparent orange orange transparent;
    }
style>