边框线实现三角形

元素的宽高都要设置为0

width: 0px;
height: 0px;

利用边框线的宽度定义三角形的大小

 border-width: 50px;
 border-style: solid;
/* 四个三角形 */
 border-color: aqua greenyellow royalblue lightcoral;

如图所示有四个三角形

一个三角形

 border-color: transparent transparent aqua ;

注意兼容IE浏览器

• 兼容ie5-6的小高度

  • font-size:0px;
  • line-height:0px;

• 兼容ie5-6的去掉边框线颜色之后，显示的黑色区块

  • 把隐藏的边框线样式修改成dashed或者dotted
  • border-style: solid dashed dashed dashed;

  如果没有兼容IE5—6，则会有如下图所示的黑块出现
  
  整体代码

 .box{
              width:0px;
              height: 0px;
              margin:200px auto 0px;
              font-size: 0;
              line-height: 0px;

              /* 边框线的宽度 定义三角形的大小 和 形状 */
              border-width:50px 50px 0px 50px;
            /* 边框线的样式 */
             border-style: solid dashed dashed dashed;
            /* 边框线的颜色 区分三角形 */
             border-color:  transparent transparent transparent aqua;
             /* 颜色的透明值  transparent */
            }

效果