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

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

菱形

有正方形旋转45°而成

/* 菱形 */
.diamond {
    width: 100px;
    height: 100px;
    background: #F7DE1F;
    transform: rotate(45deg);
}

钻石盾牌

/* 钻石盾牌 */
.diamond-shield {
    position: relative;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 20px solid #F7DE1F;
    top: -50px;
}
.diamond-shield::after {
    position: absolute;
    content: "";
    top: 20px;
    left: -50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid #F7DE1F;
}

Diamond Narrow

由正反两个三角形组合而成

/* Diamond Narrow */
.diamond-narrow {
    position: relative;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid #F7DE1F;
    top: -50px;
}
.diamond-narrow::after {
    position: absolute;
    content: "";
    top: 70px;
    left: -50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid #F7DE1F;
}

钻石形

由上方一个梯形，下面一个三角形组合而成

/* 钻石形 */
.cut-diamond {
    position: relative;
    width: 50px;
    height: 0;
    border-style: solid;
    border-color: transparent transparent #F7DE1F transparent;
    border-width: 0 25px 25px 25px;
    margin: 20px 0 50px 0;
}
.cut-diamond::after {
    position: absolute;
    content: "";
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #F7DE1F transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

鸡蛋

/* 鸡蛋 */
.egg {
    display: block;
    width: 126px;
    height: 180px;
    background: #F7DE1F;
    border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
}

吃豆人

/* 吃豆人 */
.pacman {
    width: 0;
    height: 0;
    border: 60px solid #F7DE1F;
    border-right-color: transparent;
    border-radius: 60px;
}

聊天框

/* 聊天框 */
.talkbubble {
    position: relative;
    width: 120px;
    height: 80px;
    border-radius: 10px;
    background: #F7DE1F;
}
.talkbubble::after {
    position: absolute;
    content: "";
    top: 26px;
    right: 100%;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 26px solid #F7DE1F;
}

电视屏幕

/* 电视屏幕 */
.tv {
    position: relative;
    width: 200px;
    height: 150px;
    background: #F7DE1F;
    border-radius: 50% / 10%;
}
.tv::before {
    position: absolute;
    content: "";
    top: 10%;
    bottom: 10%;
    left: -5%;
    right: -5%;
    background: inherit;
    border-radius: 5% / 50%;
}

（求关注）

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