html 三角形-CSS绘制三角形——边框方法

1. 实现一个简单的三角形

利用CSS盒模型中的边框（border）实现如下图所示的三角形：

CSS实现简单三角形

实现原理：

首先我们看一下给元素添加边框时边框是什么样子的； 假设有以下代码：

div {
    width: 50px;
    height: 50px;
    border: 2px solid orange;
}

效果图：

边框的通常使用

这是我们通常使用边框最常见的情况——我们常常只给边框一个很小的长度（通常是1-2px）； 然而，这样的日常使用很容易让你误解边框的生成方法，即元素的边框是由四个圆形边框组成的。

然而，这种情况并非如此。 事实上，元素的边框是由三角形组成的。 为了说明这个问题，我们可以减少边框的长度，并为每个边框边缘设置不同的颜色：

div {
    width: 50px;
    height: 50px;
    border: 40px solid;
    border-color: orange blue red green;
}

效果图：

边框的生成方法

既然如此，更进一步，当元素的内容规范设置为 0 时会发生什么？

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: orange blue red green;
}

效果图：

元素含量规格为0

我们会惊奇地发现，此时元素是由上、下、左、右4个三角形“拼接”而成的； 那么，为了达到最终的疗效，即保住底部三角形，还应该做什么呢？ 很简单，我们只需要把其他边框边缘的颜色设置为黄色或者透明即可：

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

最终疗效

Duang~最后简单的三角形就画出来了。 同样，如果想要得到其他边的三角形，只需将剩余边框边的颜色设置为黄色或透明即可。

然而html 三角形，“隐藏”的上边框却一直占据着空间。 为了使绘制的三角形尺寸最小化，需要将上边框的长度设置为0（其他情况同理）：

div {
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent red;
}

2. 实现一个带边框的三角形

带边框的三角形是指在三角形上添加其他颜色的边框，就像给元素添加边框一样：

带边框的三角形

由于我们不能继续通过为已有的三角形设置边框来设置边框（因为三角形本身就是借助border来实现的），所以我们必须另辟蹊径。 可以想到的最自然的方法之一是堆叠三角形，即将当前三角形覆盖在更大的三角形之上。 上图所示的实现方式是将红色三角形放在较大的红色三角形之上。

为了达到这样的疗效，需要绝对定位：

首先定义外部红色三角形：

#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}

效果是：

外层黑色三角形

然后需要定义白色三角形，因为黑色三角形的定位需要参考红色三角形的位置，所以需要使用绝对定位的方式。 为此，您还需要使红色三角形成为红色三角形的子元素。 一种可能的解决方案是在红色三角形内部定义一个附加标签来表示红色三角形html 三角形，但为了保存标签，更好的方法是使用伪元素：

#blue:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

获得的疗效为：

定义白色三角形

需要高度注意此时定义的蓝色三角形和白色三角形位置的偏转关系。 偏转将受到黑色三角形本身的顶部、左侧（在本例中）和边界长度的影响。

可能会有这样的疑问：为什么蓝色三角形会向左偏转一定距离呢？ 不是应该完全重叠在红色三角形上吗，就像下面这个一样？

黄色三角形与白色三角形完全重合

如果你有这样的疑问，说明你还没有对绝对定位形成足够的认识。 绝对定位区域是以绝对定位父元素的padding区域为基础，然后使用top、left、right、bottom等一系列属性来约束绝对定位子元素的位置。 在本例中，由于黑色三角形是绝对定位的父元素，并且其内容规范为 0，因此内容区域是三角形的上顶点：

绝对定位区域

对于蓝色三角形，由于设置了 left: 0 和 top: 0，因此白色三角形的所有内容（包括边框和边距）将根据白色三角形的上顶点定位。 此时，left:0和top:0可以分别视为两个“隔断墙”——即上隔断墙和左隔断墙。 黄色三角形的所有内容只能放在上隔墙的下方和左隔墙的右侧。 正方形面积。

由于蓝色三角形的内容区域也位于其顶点，并且在其上设置了左右各40px的边框，因此白色三角形的内容区域会向右偏转40px，从而产生之前的效果。

想想把白色三角形的位置设置为left:0和bottom:0，会得到什么样的定位效果呢？ （如下图所示）

黄色三角形设置为左：0 和下：0

了解了绝对定位之后，只需要在原来的代码中稍加改动，让白色三角形的顶点与白色三角形的顶点重合，同时蓝色三角形的大小要适当减小（与相似三角形的比例）：

#blue:after {
    content: "";
    position: absolute;
    top: 0px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

得到：

黄色三角形与白色三角形的顶点重合

在前面的代码中，故意删除了之前设置的width:0和height:0，因为子元素有一个position:absolute设置，这会导致元素规范收缩到元素内容的规范。 由于content设置为content: ""，所以子元素的规格默认为0。 所以设置 width: 0 和 height: 0 是多余的。

最后一步是使用top将红色三角形向上连接到合适的位置：

#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

得到最终效果：

最终疗效

学会了如何绘制带边框的三角形后，就很容易实现类似下图的三角形箭头了：

三角箭头

实现代码：

#blue:after {
    content: "";
    position: absolute;
    top: 2px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent #fff;
}

3.从其他角度画三角形

从其他角度画三角形，例如：

直角三角形

或者：

左右三角形

更简单，其实都是基于之前画的三角形。 如果要勾勒出直角三角形，则将左边框设置为0； 如果要勾勒出左直角三角形，则将右边框设置为0（其他情况同理）。