CSS border制作三角形详解

前端工程师在做页面遇到三角形的时候，以前都是用图片来代替，后在网上出现了用CSS样式就可以实现，这也受到了很多人的青睐，但具体为何如此设置样式就可以呈现这种效果，很多同学都模棱两可。现在就通过例子来揭晓。

新建一个html，为了简单，只写了一个div，同时增加些样式。

html:

<div class="demo"></div>

css:

.demo{
    width: 100px;
    height: 100px;
    border-top: 25px solid blue;
    border-bottom: 25px solid yellow;
    border-left: 25px solid green;
    border-right: 25px solid red;
    margin: 100px auto;
}

此时的效果是：

可以看到，边框是以梯形的方式呈现出来的。

当把div的宽度、高度都缩小到0的时候，此时的效果是：

四个方向的边框都是以三角形的方式呈现的。

现在更改一下css，让相邻的两个方向的边框颜色呈现默认颜色transparent：

.demo{
    width: 0;
    height: 0;
    border-top: 25px solid blue;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    margin: 100px auto;
}

现在的效果为：

此时三角形的宽度为50px。

这也就很好理解为什么在网上查到的css样式可以轻松实现出三角形的效果了。

总结

用css实现三角形可以通过以下步骤来实现：

1、设置元素的宽度、高度都为0。

2、根据三角形箭头朝向、颜色的需要，来设置border值。

3、为三角形箭头朝向的反方向、以及相邻两个方向设置同样的长度，并为反方向设置需要呈现的颜色，相邻两个方向的颜色设置为transparent。（此为等边三角形，想要其它三角形，可以调整长度）

4、border设置的长度为需要长度的一半。

用这种方法，并配合before、after等伪元素，可以轻松实现出很多效果，不用再辛苦切图片调整位置了。

赏

谢谢你请我吃糖果