如何用css画三角形

在设计稿中，常常会出现好多三角形，若是将三角形变成图片，经过img标签的src或者background中的url来访问，从前端性能方面来看这并很差。那问题来了，如何用css来画三角形呢？别着急，先来看看我所遇到过的三角形。以下图，有实心三角形，空心的，还有能够归为三角形的小箭头。

先来讲说实心的三角形。

画一个三角形，首先想到的是如何画三角形的形状，而后给一个背景颜色。可是在写div时，会发现，div是的边框是直线。那么，我想到，要是给div的高和宽设置为0，而后设置四个border不一样的颜色，那么这个颜色会重叠覆盖么？ps：固然会想到设置padding或者margin值，可是这两种属性没法设置颜色。

#triangle02{
    width: 0;
    height: 0;
    border-top: 50px solid blue;
    border-right: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid yellow;
    }

由于咱们只想要一个三角形，若是把其余三个三角形的颜色变白，那就只剩下一个，等等，若是背景颜色不是白色呢？css中有这样一个属性，transparent，背景透明。这样即可以达到咱们的目的了。

#triangle03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
    }
#triangle04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right: 50px solid red;
    }
#triangle05{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#triangle06{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 50px solid yellow;
    }

上面的代码就能够实现，四个不一样方向的三角形了。

设计稿中可能还会出现高和底长度有限制的三角形，这里以第三个绿色三角形为例。看上面的代码，咱们能够发现，三角形的底为border的两倍，border-bottom为三角形的高。来看下面这组三角形：

#my01{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#my02{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 80px solid green;
    }
#my03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid green;
    }
#my04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 150px solid green;
    }

#my11{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid green;
    }
#my12{
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-bottom: 100px solid green;
    }
#my13{
    width: 0;
    height: 0;
    border: 90px solid transparent;
    border-bottom: 100px solid green;
    }
#my14{
    width: 0;
    height: 0;
    border: 110px solid transparent;
    border-bottom: 100px solid green;
    }

够详细吧~

那个小箭头的三角形，主要运用了css3的transform中的rotate()，咱们后续再介绍吧！