这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

使用 CSS 可以绘制出许多形状，比如三角形、梯形、圆形、椭圆等等，并不只是可以绘制矩形，还可以绘制心形、钻石、鸡蛋、吃豆人、聊天框、图标等等。下面来看看怎么实现这些形状的吧。分为基本形状和组合形状来说，基本形状是比较容易实现的，而利用这些基本形状进行组合，就可以实现稍微复杂点的组合形状了。

向上三角形

/* 向上三角形 */
.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #2BA245;
}

向下三角形

/* 向下三角形 */
.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #2BA245;
}

向左三角形

/* 向左三角形 */
.triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid #2BA245;
}

向右三角形

/* 向右三角形 */
.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid #2BA245;
}

左上三角形

/* 左上三角形 */
.triangle-topleft {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-top: 100px solid #2BA245;
}

右上三角形

/* 右上三角形 */
.triangle-topright {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-top: 100px solid #2BA245;
}

左下三角形

/* 左下三角形 */
.triangle-bottomleft {
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-bottom: 100px solid #2BA245;
}

右下三角形

/* 右下三角形 */
.triangle-bottomright {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-bottom: 100px solid #2BA245;
}

梯形

/* 梯形 */
.trapezoid {
    width: 100px;
    height: 0;
    border-bottom: 100px solid #2BA245;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

平行四边形

skew() 函数定义了一个元素在二维平面上的倾斜转换

/* 平行四边形 */
.parallelogram {
    width: 150px;
    height: 100px;
    transform: skew(30deg);
    background: #2BA245;
}

（求关注）

欢迎关注我的公众号：A纲 Coder，获得日常干货推送。最后再次感谢您的阅读，我是程序猿憨憨