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

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

爆炸形状（12角）

原理：由三个正方形旋转而成，每个正方形在前一个图形的基础上旋转30°。

.burst-12 {
    position: relative;
}
.burst-12, .burst-12::before, .burst-12::after {
    width: 80px;
    height: 80px;
    background: #F48034;
}
.burst-12::before, .burst-12::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
}
.burst-12::before {
    transform: rotate(30deg);
}
.burst-12::after {
    transform: rotate(60deg);
}

阴阳八卦

原理：由对半颜色的圆形和两个小圆组合而成

将两个小圆垂直居中

.yin-yang {
    position: relative;
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: #F48034;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
}
.yin-yang::before, .yin-yang::after {
    position: absolute;
    content: "";
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 100%;
}
.yin-yang::before {
    left: 0;
    background: #eee;
    border: 18px solid #F48034;
}
.yin-yang::after {
    left: 50%;
    background: #F48034;
    border: 18px solid #eee;
}

放大镜

原理：由一个镂空的圆形和一个长方形组合而成

.magnifying-glass {
    position: relative;
    width: 40px;
    height: 40px;
    border: 10px solid #F48034;
    background: transparent;
    border-radius: 100%;
}
.magnifying-glass::before {
    position: absolute;
    content: "";
    right: -25px;
    bottom: -10px;
    width: 35px;
    height: 8px;
    background: #F48034;
    transform: rotate(45deg);
}

圆锥形

原理：使用 border 撑开，左边框和有边框设置成透明色，上边框设置主色

.cone {
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 100px solid #F48034;
    border-radius: 100%;
}

月亮

原理：设置透明的圆形，使用 box-shadow 属性绘制月牙

.moon {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    box-shadow: 15px 15px 0 0 #F48034;
}

十字架

原理：由两个横竖方向的长方形组合而成

.cross {
    position: relative;
    width: 100px;
    height: 20px;
    background: #F48034;
}
.cross::before {
    position: absolute;
    content: "";
    top: -40px;
    left: 40px;
    width: 20px;
    height: 100px;
    background: #F48034;
}

徽章丝带

原理：由一个圆形，两个相反方向的三角形组合得到

.badge-ribbon {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    /* background: #F48034; */
}
.badge-ribbon::before,
.badge-ribbon::after {
    position: absolute;
    content: "";
    top: 70px;
    left: -10px;
    border-bottom: 70px solid #F48034;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    transform: rotate(-140deg);
}

.badge-ribbon::after {
    left: auto;
    right: -10px;
    transform: rotate(140deg);
}

写到这里已经是第五篇了，也算完结篇了，后面如果有机会的话，就是更复杂的图形了。

（求关注）

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