以前用CSS画图形都是照搬别人的代码背，现在想来研究一下

三角形和梯形

先把边框用不同颜色画出来

.border{
width:100px;
height:100px;
border-left:50px solid red;
border-right:50px solid blue;
border-bottom:50px solid yellow;
border-top:50px solid green;
}

呈现的结果

image.png

哦~~~原来你每个边框长这样啊，那么是不是把其余边框都变得不见，就会获得梯形呢

.bor{
width:100px;
height:100px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid yellow;
border-top:50px solid transparent;
}

image.png

那么由于border设置的为100*100，边框宽为50，这是一个上底100px，下底200px的梯形
这样来看，只要上底是0，梯形就会变成一个三角形了吧

image.png

虽然成功了但是我觉得不行，我就要直角三角形
想一下现在三角形是这个形状，是因为它的左边右边都有一个隐形的三角形怼着它，如果把边上的三角形变没有是不是就变直角了呢

.bor{
width:0px;
height:0px;
border-right:0px solid transparent;
border-top:0px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid yellow;
}

顺便把没用的top也设置成为0，这样空着三角形的位置的时候margin-top直接改

image.png

想要钝角三角形就改左右边框一大一小就好了，同样梯形也能做到差不多的往不同方向靠的效果

菱形

菱形可太简单了，画个矩形skr一下就行了，哦不skew一下
skew是翻转函数

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

所以画一个矩形加一句，就齐活

transform: skew(20deg);

五角星

五角星？这些复杂图形你直接用canvas画好不好啊？？
回头再说吧