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

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

心形

心形是由两个小药丸进行组合得到的。

/* 心形 */
.heart {
    position: relative;
    width: 100px;
    height: 90px;
}
.heart::before,
.heart::after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

正方形

/* 正方形 */
.square {
    width: 100px;
    height: 100px;
    background: red;
}

八边形

八边形是由一个正方形和两个正反梯形进行组合得到的。

/* 八边形 */
.octagon {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
}
.octagon::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    border-bottom: 29px solid red;
    width: 42px;
    height: 0;
}
.octagon::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    border-top: 29px solid red;
    width: 42px;
    height: 0;
}

矩形

/* 矩形 */
.rectangle {
    width: 200px;
    height: 100px;
    background: red;
}

六边形

六边形是由一个矩形和两个正反三角形进行组合得到的。

/* 六边形 */
.hexagon {
    position: relative;
    width: 100px;
    height: 55px;
    background: red;
}
.hexagon::before {
    position: absolute;
    content: "";
    top: -25px;
    left: 0;
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
    border-bottom: 25px solid red;
    width: 0;
    height: 0;
}
.hexagon::after {
    position: absolute;
    content: "";
    bottom: -25px;
    left: 0;
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
    border-top: 25px solid red;
    width: 0;
    height: 0;
}

五边形

五边形是由一个三角形和一个倒梯形进行组合得到的。

/* 五边形 */
.pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
.pentagon::before {
    position: absolute;
    content: "";
    top: -85px;
    left: -18px;
    width: 0;
    height: 0;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

CSS 能绘制的东西，不仅仅只有这些，还有很多很多，文中都没有说出来，而即便是文中已经实现的形状也不只有一种实现方式，有兴趣的小伙伴可以继续去探索。

下篇我们继续探索更多有趣的图案。

（求关注）

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