CSS问题：为什么我们这样使用border属性可以画出各式各样的三角形？

CSS问题：为什么我们这样使用border属性可以画出各式各样的三角形？

我们常常可以通过设置各个方向上的border的大小和颜色（设置为透明或其他颜色）来画出各种三角形，但是我始终不太理解它为什么可以？当我需要一个三角形的时候，只是按照我之前见过的做法照葫蒌画瓢，试着试着就画出来。

如下代码所示，它是如何绘制出这个倒着的三角

<div class="triangle left"></div>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background: #F2F2B6;
    position: relative;
  }
  .left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
  }
  div {
    width: 0;
    height: 0;
    border-top: 150px solid #FF6D00;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
  }
</style>

结果:

img

疑问：

  1. 绘制顺序。它是按照上border->右border->下border->左border的顺序来确定大小和形状的吗？
  2. 各个方向上的border的形状和大小是怎么确定的？它可以是不同形状的三角形或者梯形。如果形状确定了，比如它是一个三角形，那它三边长又是如何确定的？
  3. 如果你知道这些问题的答案，那么你是从何处知道的？有文档说明吗？

理解成一个正方形，分四块，如下图，上右下左。你的代码，就是下面三角形为0 左右 小，上面独大。

img

文档说明实现三角形

你把 width、height 写上值，border-left、border-right写上颜色，你就可以理解了，其实就是一个上边框

倒着的三角形图标参考代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style type="text/css">
        .top{
            width:0;
            height:0;
            border:10px solid transparent;
            border-bottom:10px solid red;
        }
    </style>
    <body>
        <div class="top"></div>
    </body>
</html>

运行结果：

img

也可以看看这篇博客喔！https://liuze.blog.csdn.net/article/details/110406593