CSS如何画一个三角形

今天天气不错。在一个高楼上班很好的好处就是；周边空旷的风景不错，周边环境不错。这样真的挺好的。就这样真的认真的开始自己的工作，不要再去逃避不要再去埋怨什么了，我还沉浸在写代码的时候，突然遇到一个位置需要三角形形状，这时候脑袋一拍，忘记了……忘记不可怕资料一查完全可以解决，所以也写了一篇文章来详细说一下如何去实现一个三角形形状。

实现过程

步骤一、
首先第一步，搭出盒子模型，给它加上边框。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .triangle {
      width: 50px;
      height: 50px;
      border: 2px solid;
      border-color: #3fed9c #d8b423 #06433c #0ca9f1;
    }
  </style>
</head>

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

</html>

如下图所示：

步骤二、
将盒子的border设置为50px 变更代码如下：

    .triangle {
      width: 50px;
      height: 50px;
      border: 50px solid;
      border-color: #3fed9c #d8b423 #06433c #0ca9f1;
    }

如下图所示：

步骤三、 此时中间白色的区域就是宽高（height，width）只要将他们设置为0就可以得到四个三角形变更代码如下：

  .triangle {
      width: 0;
      height: 0;
      border: 50px solid;
      border-color: #3fed9c #d8b423 #06433c #0ca9f1;
    }

如下图所示：

步骤四、 虽然完成了以上方式可以达到视觉上实现了三角形，但实际上，隐藏的部分任然占据部分高度，需要将上方的宽度去掉，然后再将两侧的颜色设置透明。变更代码如下：

   .triangle {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 50px;
      border-color: transparent transparent #06433c;
    }

如下图所示：

实现一个空心的三角形

 <style>
    .triangle {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 50px;
      border-color: transparent transparent #06433c;
      position: relative;
    }

    .triangle::after {
      content: '';
      border-style: solid;
      border-width: 0 40px 40px;
      border-color: transparent transparent #04be9c;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>

如果想要实现一个只有边框是空心的三角形，由于这里不能再使用border属性，所以最直接的方法是利用伪类新建一个小一点的三角形定位上去。效果图如下：

伪类元素定位参照对象的内容区域宽高都为0，则内容区域即可以理解成中心一点，所以伪元素相对中心这点定位
将元素定位进行微调以及改变颜色，就能够完成下方效果图：

最终全局效果代码（空心三角形）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .triangle {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 50px 50px;
      border-color: transparent transparent #06433c;
      position: relative;
    }

    .triangle::after {
      content: '';
      border-style: solid;
      border-width: 0 40px 40px;
      border-color: transparent transparent #fff;
      position: absolute;
      top: 6px;
      left: -40px;
    }
  </style>
</head>

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

</html>

原理分析

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

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

取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的
当仅有邻边时，两个边会变成对分的三角
当保留边没有其他接触时，极限情况所有东西都会消失也可以利用旋转、隐藏，以及设置内容宽高等属性，就能够实现其他类型的三角形如设置直角三角形。

.box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置两条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px; 
    /* 其他设置 */
    margin: 50px;
}