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

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

圆形

/* 圆形 */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: #4E6FA6;
}

border-radius 在低版本的 Android 不支持百分比

椭圆形

/* 椭圆形 */
.oval {
    width: 100px;
    height: 50px;
    border-radius: 100px / 50px;
    background: #4E6FA6;
}

border-radius: 100px / 50px;
等价于：
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
border-radius

五角星

/* 五角星 */
.star-five {
    margin: 25px 0;
    position: relative;
    display: block;
    color: #4E6FA6;
    width: 0px;
    height: 0px;
    border-right:  50px solid transparent;
    border-bottom: 35px  solid #4E6FA6;
    border-left:   50px solid transparent;
    transform: rotate(35deg);
 }
 .star-five::before {
    border-bottom: 40px solid #4E6FA6;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -22px;
    left: -32px;
    display: block;
    content: '';
    transform: rotate(-35deg);
 
 }
 .star-five::after {
    position: absolute;
    display: block;
    color: #4E6FA6;
    top: 2px;
    left: -52px;
    width: 0px;
    height: 0px;
    border-right: 50px solid transparent;
    border-bottom: 35px solid #4E6FA6;
    border-left: 50px solid transparent;
    transform: rotate(-70deg);
    content: '';
 }

六角星

六角星是由两个正反三角形重叠进行组合得到的。

/* 六角星 */
.star-six {
    position: relative;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #4E6FA6;
}

.star-six::after {
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #4E6FA6;
}

（求关注）

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