如何用css画一个三角形？

首先观察测试如下代码：

<style type="text/css">
  div {
    width: 100px;
    height: 100px;
    border-color: red orange yellow green;
    border-width: 20px;
    border-style: solid;
    background: white;
  }
</style>

按照均分法则，上、下、左、右四个边框是占比完全等分盒子四周的，要想等分四条边框就只有这样：

现在尝试把其中三条边框颜色设置成透明色：

border-color: transparent transparent yellow transparent;

再来观察：

现在的形状是梯形，很容易想到是因为现在盒子是有宽度和高度的，把宽高设成0：

width: 0;
height: 0;

就成了这个样子：

大功告成，这就是我们要得到的三角形了！