CSS 绘制三角形

一、WHY ? 为什么要用CSS画三角形？

三角形的绘制在前端开发中有很多应用场景，比如聊天气泡、按钮浮层等。

一般实现的话有两种方式：

1. 直接用切图，这是比较偷懒的方式，

    优点：开发快

    缺点：图形本身不够灵活，依赖切图、会消耗一次请求资源

2. 使用CSS绘制

    优点：灵活、不消耗请求资源，渲染更快

*由上可知，本着能省则省的原则，使用CSS绘制能够减少请求成本，且更灵活（毕竟每次都三次握手还是挺费体力的XDD）

 

二、HOW? 怎么实现？

下面我们就来说一下如何使用CSS绘制三角形，以及其原理：

1. 首先你得知道什么是标准盒模型，margin + border + padding + content 笑而不语。

2. 开画！先画个带边框的普通矩形，如下图1

我们把矩形的宽度设为0会是什么样呢？如下图2

再把高度设为0如下图3

聪明的小伙伴已经知道了，只要我们把上、左、右的边框颜色设为透明，再把上边框的宽度设为0，就会变成下图这样

此时，三角形的上边框宽度，就是三角形顶部距离矩形上边的距离。三角形的高就是底边框的宽度，三角形的宽度就是左右边框宽度之和。那么假如我想做个直角三角形，只需要把左或右边框的宽度设为0即可，如下图（右边框为0）

三、Demo ~ Ctrl C + Ctrl V 天下无敌！

最后还是贴上代码，方便交流嘛 XDDD ....

    
    
    
    
    



    矩形

    三角形

    左直角三角形

    右直角三角形

效果如下：