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>