小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
上次文章提到了css实现平行四边形盒子，所以这次集齐了一些基础且常用的形状用css来实现一下：三角形，梯形，扇形，五角星，爱心。实现的方式也有很多，这里也不会一一介绍，只使用较为常用的方式让大家明白一下思路便可。
三角形
先从最简单的开始，三角形。思路也很简单，就是定义一个盒子，用**「边框」**占据整个盒子，隐藏不需要的边框。
大家可以想象一下，将边框定义充满盒子。当然，不要忘记了还需要加上：box-sizing: border-box;（也可以将宽高设为0，就不用写该属性）。最后再将盒子其他边框设置为透明即可。
div {
width: 150px;
height: 150px;
box-sizing: border-box;
border-top: 75px solid transparent;
border-right: 75px solid red;
border-bottom: 75px solid transparent;
border-left: 75px solid transparent;
}
其实还可以再做那么一丢丢优化，观察上面的三角形。其实有一条边是多余的，不起如何作用。就是所需要的三角形的对边。把它去掉就很美好了。
div {
width: 150px;
height: 150px;
box-sizing: border-box;
border-top: 150px solid transparent;
/* border-right: 75px solid transparent; */
border-bottom: 150px solid transparent;
border-left: 150px solid red;
}
梯形
如果大家实现过三角形,梯形其实很容易得到了。去掉box-sizing: border-box;属性就可以看出端倪了。
再和实现三角形一样隐藏掉其他的边
div {
width: 50px;
height: 50px;
/* box-sizing: border-box; */
border-top: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 75px solid transparent;
border-left: 75px solid red;
}
优化也是和三角形一样去掉对边。
扇形
难度开始升级，之前没有遇到过实现过扇形，也是临时查了一下资料才知道的。长知识长知识
参考的张鑫旭大佬的文章“3种纯CSS实现中间镂空的12色彩虹渐变圆环方法”。推荐大家看看大佬的实现，就不在这里献丑了。
贴个大佬的图：
\
主要思路其实就是**「遮住不想要的部分或者旋转、缩放、变形盒子使形状出现」**，不止扇形，所有奇奇怪怪的形状都是这样实现的。
还有一种特别的方式呢就是通过css函数：conic-gradient进行实现，具体的我也没有操作过，大家可以试试能不能实现。也算get到一个新技能
五角星
五角星可以分解成什么呢，可能第一时间想到倒五边形加上五个三角形，可以这样css难以实现。盒子是可以堆叠到一起的，再看一下五角星，是不是可以看成**「三个三角形旋转」**得到呢
.first,.second,.three {
width: 0;
height: 0;
position: absolute;
border-left: 86.6px solid transparent;
border-right: 86.6px solid transparent;
}
.first {
border-top: 50px solid red;
/* transform: rotate(120deg); */
}
.second {
border-top: 50px solid yellow;
transform: rotate(73deg);
}
.three {
border-top: 50px solid blue;
transform: rotate(148deg);
}
爱心
爱心怎么实现呢？真是麻爪子。难就难在要分解成什么，又不是有棱有角的东西，就不好观察。
看到一篇文章才恍然大悟。其实和五角星一样，也是要找准要分解成什么图案。借用一下那篇文章里面的图：
是不是一下就get到了，那这个就留给你们自己尝试实现吧。
参考文章： 爱心：“纯CSS实现爱心图形”
五角星：“css实现五角星”
梯形：“css 梯形，三角形 实现原理”
