（作者：杨先金；撰写时间：2019年2月7日）
有时我们想要给页面增添几分美感，五角星的颜值无疑会给你的页面增色不少，但强迫症的我们又不想去网上截图，那我们能不能自己制作一个五角星出来呢？今天我要跟大家分享如何制作一个五角星。
1，首先把html部分布局好，在这里我把一个大的五角星分成三小块，用one，two，three三个不同的类将它们区分开来，方便之后的样式设置；
为了看起来更加美观，我给大盒子设置了背景颜色，类似于五星红旗的大红；
2，给这三个小块设置公共样式，曾现出来的是三个黄色的方块，但是我们要的是三个三角形，而不是三个正方形，因此就需要用到我们今天重点讲到的技术点——border-color；
分别给这三个方块设置边框颜色（或给它们共同的类设置边框颜色），给它们其中一边设置成黄色，另外三边设置成透明色，如下图所示；
3，这样我们就达到了三个相同颜色的三角形，最后只需要把它们稍微旋转一下，把它定位到你想要的位置去就可以了；
一个美丽的五角星就制作完成。
相关文章：