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;
}

这时三角形效果便出来了，绘制三角形的原理思路也清晰了。
绘制单个三角形是：设置某个方向的border尺寸及色值，相邻方向的border设置尺寸，色值设置透明，对角方向的border不设置。
设置不同方向的border能绘制出不同朝向的三角形；
设置某方向border的尺寸及相邻方向的border尺寸，能组合成各种类型的三角形。
如下所示

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

.ex-grid {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgb(105, 206, 46);
}

.ex-grid {
    position: fixed;
    width:0;
    height: 0;
    border-top: 100px solid rgb(56, 190, 38);
    border-right: 100px solid transparent;
}

.ex-grid {
    position: fixed;
    width:0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgb(94, 255, 0);
}

绘制梯形

绘制梯形依然是使用到border和尺寸色值特性，再搭配元素自身宽高属性。

.ex-grid {
    position: fixed;
    width:100px;
    height: 0;
    border-top: 80px solid rgb(52, 85, 231);
    border-right: 40px solid transparent;
}

.ex-grid {
    position: fixed;
    width:100px;
    height: 0;
    border-width:0 37px 100px 37px;
    border-style:none solid solid;
    border-color:transparent transparent rgb(86, 94, 209);
}

带圆角梯形制作

下面这个是带有圆角的梯形，实现这种除了图片之外，用到了perspective。
perspective属性定义3D元素距视图的距离，以像素为单位。

<div class="ex-grid"></div>

.ex-grid {
    position: fixed;
    top: 10rem;
    left: 4rem;
    width: 2rem;
    height: 8rem;
    background-color: #3d3d3d;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transform: perspective(20px) rotateX(0deg) rotateY(8deg) translateZ(0);
}