CSS案例：使用border绘制一个三角形

一，border绘制三角形原理

使用 border 绘制三角形 是利用了宽高为零的容器，通过设置边框border的宽度来实现。

在这里可能会有个疑问，既然容器的宽高为零，那么为什么通过设置边框的宽度就可以使得容器有内容呢？它的宽高不是零吗？

其实这里涉及到了CSS3中盒模型的内容，在平时的使用中，我们使用的容器是标准盒模型，容器设置的宽高是不包含边框的高度的。如下图所示：

如上图所示，content 表示容器的内容，平时设置的容器的宽高也是指content的宽高，padding 是内边距，border是它的边框，margin是外边距。

所以上面说到的宽高为零的容器是指content(内容)的宽高为零。我们在界面上看到的容器大小实际上是 border(边框) + padding(内边距) + content(内容) 的大小。所以可以通过设置边框的宽度将容器撑起来。

如下所示，在四个边框上使用了不同的颜色便于区分，这样就可以得到四个三角形。

juejin

然后将其他三边的颜色设置为 transparent，则可以得到剩余的三角形。

juejin

但这种方式，虽然视觉上是实现了三角形，但实际上，隐藏的部分仍然占据部分高度，需要将上方的宽度去掉，最终实现代码如下：

juejin

二，border的形状

可以看到，边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形。

#app{
  width:40px;
  height:40px;
  border-top: 10px solid yellowgreen;
  border-bottom: 10px solid deeppink;
  border-left: 10px solid bisque;
  border-right: 10px solid chocolate;
}

当分别取消边框的时候，发现下面几种情况：

• 取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的
• 当仅有邻边时， 两个边会变成对分的三角
• 当保留边没有其他接触时，极限情况所有东西都会消失

因此可以通过控制border的宽度来获取所需要的三角形。

例如获取一个直角三角形：

juejin