css写三角型

有时候为了项目优化，我们可能需要用css写一个三角型来代一个图片，这样可以少加载一些资源，思路就是用元素的border来实现：步骤如下：

• 我们先写一个元素：

<div class="triangle"></div>

• 样式如下：

 .triangle{
        width: 200px;
        height:200px;
        border-top:50px solid red;
        border-right:50px solid blue;
        border-bottom:50px solid yellow ;
        border-left:50px solid green;
    }

• 打开页面，效果如下：

我们看到，元素，除了里面的内容部分，border是均分的效果，如果我们给元素设置大小为0,会是什么效果：

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

• 打开页面，如下所示：

我们看到当元素设置宽高为0的时候，border充满了整个内容，并且是均分的效果，走到现在，我们要想写一个三角形，就很简单了，最简单的方式，我们可以把其他border的颜色设置为透明的，就可以达到我们想要的三角型的效果了

.triangle{
        width: 0px;
        height:0px;
        border-right:50px solid #ffffff;
        border-left:50px solid #ffffff;
        border-top:50px solid #ffffff;
        border-bottom:50px solid yellow ;
    }

• 打开页面，如下所示：

除了这个方法，我们还有没有其他方法实现一个三角形呢，毕竟这个不是最优的方案，那我们是否可以去掉某一部分边框来达到效果呢，先尝试一下，我们先缩小上边框，border由原来的50px,设置为现在的20px,看一下效果：

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

• 打开页面，如下所示：

我们看到上边框，占据的内容比其他边框小了一些，而与它相对应的下边框的内容同步增加了一些，按照这个逻辑，如果我们上边框设置为0，那下边框所占据的内容应该可以达到顶部

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

• 那接下来，我们可以按照第一种生成三角形的方式来隐藏另外两个边框来达到效果：

.triangle{
        width: 0px;
        height:0px;
        border-right:50px solid #ffffff;
        border-left:50px solid #ffffff;
        border-top:0px solid red;
        border-bottom:50px solid yellow ;
    }

• 打开页面，如下所示：

这样的一个三角形，几乎满足了我们的需求，但是项目中有时候我们会遇到带气泡的三角形的效果，如下图所示：

• 现在我们用之前尝试的思路来写出来这样的效果：

效果跟想象中的差别好像有点大，第一，我们没有写出来一个带边框的的三角形，第二，三角形不能和下面的边框很好的融合而达到气泡的效果，那我们来一步一步的解决这些问题，首先如何写出来一个带边框的三角形，因为三角形，我们本身就是用边框实现的，所以我们不能再用边框来给三角形加边框了，那这个时候，我们可用阴影，来实现边框的效果

.box{
        width: 200px;
        height: 100px;
        margin: 100px auto;
        position: relative;
        border:1px solid  red;
        background-color: yellow;
    }
    .triangle{
        width: 0px;
        height: 0px;
        border-width: 10px;
        border-style: solid;
        border-color: yellow yellow yellow yellow;
        position: absolute;
        left: 25px;
        top: -35px;
        box-shadow: -1px 1px 1px 0  red ;
    }

• 打开页面，如下所示：

通过给边框加一个向左下角偏移的阴影，实现一个带边框的三角形，再通过旋转135度和定位，就可以组合实现我们想要的效果；

.triangle{
        width: 0px;
        height: 0px;
        border-width: 10px;
        border-style: solid;
        border-color: yellow yellow yellow yellow;
        position: absolute;
        left: 25px;
        top: -9px;
        box-shadow: -1px 1px 1px 0  red ;
        transform: rotate(135deg);
    }

这样一个气泡的效果，我们就实现了。注意点就是，border的阴影颜色和元素的边框的颜色一样，border的颜色和元素的背景颜色一样，这样测可以重合。那既然我们写的三角形，内容为0，那我们可不可以直接在一个元素的伪元素after写出三角形的效果，尝试一下：

.box:after{
        content: "";
        width: 0px;
        height: 0px;
        border-width: 10px;
        border-style: solid;
        border-color: yellow yellow yellow yellow;
        position: absolute;
        left: 25px;
        top: -9px;
        box-shadow: -1px 1px 1px 0  red ;
        transform: rotate(135deg);
    }

• 页面效果：

明白了原理，我们就可以随意的写三角形了。