🎉 CSS三角如何实现

网页中常见一些三角形，使用 CSS 直接画出来就可以，不必做成图片或者字体图标。

可以把盒子宽高设置为0，边框给予厚度和颜色。

 div {
    width: 0; 
    height: 0;
    border: 50px solid;
    border-color: red green blue black;
    line-height:0;
    font-size: 0; //这两行是为了兼容性问题，照顾低版本浏览器
 }

实现一个三角的效果：

div {
    width: 0; 
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
    line-height:0;
    font-size: 0;
 }

1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;