CSS 如何绘制三角形

<style>
  .triangle {
    width: 0;
    border-top: 50px solid red;              /* 上三角形 */
    border-right: 50px solid yellow;         /* 右三角形 */
    border-bottom: 50px solid palevioletred; /* 下三角形 */
    border-left: 50px solid blue;            /* 左三角形 */
  }
</style>
<body>
  <div class="triangle"></div>
</body>

https://codepen.io/JingW/pen/MWqPqBR

把其中的三个边框色，设置为transparent，就可以得到三角形了。效果和代码如下：

Untitled

<style>
  .triangle {
    width: 0;
    border: 50px solid transparent;     /* 边框颜色为透明 */
    border-left-color: 50px solid blue; /* 左三角形 */
  }
</style>
<body>
  <div class="triangle"></div>
</body>

css 如何画一个梯形

方法一：1 个长方形和 2 个三角形组合而成

https://codepen.io/JingW/pen/QWVZVVZ

方法二：利用 border 边框来绘制

当我们给盒子加上宽度后，再分别给不同边框加上不同大小和颜色，就可以得到如下图形。

Untitled

<style>
  .trapezoid {
    width: 100px;
    border-top: 50px solid red;
    border-right: 50px solid skyblue;
    border-left: 50px solid yellow;
    border-bottom: 50px solid pink;
  }
</style>
<body>
  <div class="trapezoid"></div>
</body>

我们只需要把底边框颜色留下，其它三个边框颜色改为透明，就可以看到一个梯形了

Untitled

<style>
  .trapezoid {
    width: 100px;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 100px solid pink; /*底边框代表梯形的高度，我们把他加高到100px*/
  }
</style>
<body>
  <div class="trapezoid"></div>
</body>