css绘制三角形、梯形及梯形带圆角

这里使用css绘制各种图形都是采用单节点的方式，未涉及多节点组合图形绘制。
主要是多边形绘制，如三角形、梯形。

绘制三角形

绘制各种三角形是以css-border为基础展开，巧用border（top/bottom/left/right）的尺寸值及色值。
下面看一个矩形

.ex-grid {
   
    position: fixed;
    width:0;
    height: 0;
    border: 100px solid #6c9;
}

这是一个矩形，没有宽高值，border100px，也就是说该矩形是由border组成。
再对border进行设置：

.ex-grid {
   
    position: fixed;
    width:0;
    height: 0;
    border: 100px solid #6c9;
    border-left-color:turquoise;
    border-right-color: tomato;
    border-bottom-color: thistle;
    border-top-color: yellowgreen;
}

这时三角形效果便出来了，绘制三角形的原理思