怎样使用CSS画一个三角形，原理是什么？

怎样用 CSS 画一个三角形？原理和实战指南

<hr> 一、焦点原理

CSS 画三角形的本质是使用边框（border）的叠加特性。当一个元素的宽高为 0 时，其边框会以对角线情势相交，形成四个独立的三角形地区。通过控制某一边的边框颜色为可见，其他边为透明，即可渲染出特定方向的三角形。
多少逻辑：
每个边框（上、右、下、左）在宽高为 0 的元素中，会以 45 度角向中央紧缩。比方：

  

• 若只体现上边框，则上下边框会交叠为矩形；但若潜伏其他三边，则上边框会出现为倒三角形。
  

<hr> 二、底子实当代码

1. .triangle {
2.   width: 0;
3.   height: 0;
4.   border: 50px solid transparent; /* 透明边框占位 */
5.   border-top-color: red; /* 只显示上边框颜色 */
6. }

复制代码

结果：天生一个向下的赤色三角形（由于上边框向下挤压）。
<hr> 三、差别方向的三角形

通过调解 border-{方向}-color 控制三角形指向：

1. /* 向上 */
2. .triangle-up {
3.   border-bottom-color: red;
4. }
6. /* 向右 */
7. .triangle-right {
8.   border-left-color: red;
9. }
11. /* 向左 */
12. .triangle-left {
13.   border-right-color: red;
14. }
16. /* 向下 */
17. .triangle-down {
18.   border-top-color: red;
19. }

复制代码

<hr> 四、进阶本领