用CSS实现三角形、等腰梯形等根本原理以及编码实现

实现原理

关键实现因素在于border的top right left bottom属性，看下面这样一段css样式：

.triangle {
   
    height: 0px;
    width: 0px;
    border-top: 50px solid gold;
    border-right: 50px solid gray;
    border-bottom: 50px solid green;
    border-left: 50px solid yellow;
}

生成的样式是，当然如果你觉得分别设置四个有点冗杂，你去掉了某一个，比如去掉border-left这一行，你会发现上图变成了这样，这样好像离答案近了一步。

三角形

接下来如果需要下面绿色的三角形，我们需要将上面两三角形设为好像隐形一样，这就需要 border的另一个属性值transparent，将上面代码改为

.triangle