CSS绘制三角形 ~ border

最近突然想温故知新了，用border实现这样一个三角形，如图：

border实现三角形

第一步：先实现一个带边框的正方形。

border的基本使用

  div{ 
    width: 50px; 
    height: 50px; 
    border: 25px solid orange;
  }

第二步：将正方形的每条边设置为不同的颜色。

发现什么了吧，还有梯形呢！

div{ 
    width: 50px; 
    height: 50px; 
    border: 25px solid;
    border-color: red blue orange green;
}

第三步，将正文形宽高都设为0。

悄悄改了下边框，看起来能一般大

div{ 
    width: 0; 
    height: 0; 
    border: 50px solid;
    border-color: red blue orange green;
}

再插播一下，如果把上面的border设为0，会变成什么样呢？

发现了两个直角

  div{ 
    width: 0; 
    height: 0; 
    border: 50px solid;
    border-color: red blue orange green;
    border-top: 0;
}

第四步，把其它边的颜色设置为白色或透明色。

这样就实现了！

div{ 
    width: 0; 
    height: 0; 
    border: 50px solid;
    border-color: transparent transparent orange transparent;
}

就这样，我们利用border的特性就实现了三角形。