使用CSS绘制三角形与平行四边形

transform语法：

transform: none|transform-functions;

RUNOOB.COM文档

使用transparent还要注意兼容性问题，如果不支持想要向下兼容还是要用图片来实现的。

三角形
将width height设置为0，图形的大小是由border来控制的。具体位置自己再配合需求调整一下。

    .triangle {
        position: absolute;
        width: 0;
        height: 0;
        left: 50%;
        bottom: 50%;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #ffea0c;
    }

效果图

平行四边形
平行四边形主要用到了transform: skew属性，具体描述如下：

    .parallelogram {
        position: absolute;
        left: 50%;
        bottom: 50%;
        width: 200px;
        height: 80px;
        background: #5d00bd;
        transform: skew(-10deg);
    }

效果图