目录
一、前言
二、五角星
1.五角星，叠盖法：
2.五角星，拼凑法：
3.五角星，svg画法：
4.五角星，利用clip-path属性进行裁剪
三、结束语
一、前言
通过上两节的内容我们对css画小图标有了新的理解，同时也提高了我们的css水平，那么今天我们继续来学习css画小图标系列，来看不一样的css。
二、五角星
1.五角星，叠盖法：
将一个向上三角型与一个向下三角形进行交叉定位，再利用一个与背景色形同的三角形叠盖到向上三角型上，就完成了一个五角星，具体查看下列代码。
步骤一：制作向下与向上 的三角形
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.star{/*制作向下三角型，看不懂的可以参考不一样的css(一)*/width: 0;height: 0;border-top:40px solid red;border-bottom:40px solid transparent;border-right:40px solid transparent;border-left:40px solid transparent;
/* 让盒子进行居中展示*/margin: 100px auto;
/* 设置定位*/position: relative;}.star::before{
/* 利用伪元素减少html代码，来制作一个向上三角形*/content: "";display: block;width: 0;height: 0;border-top: 40px solid transparent;border-bottom: 69px solid red;border-right: 40px solid transparent;border-left: 40px solid transparent;
/* 设置向上三角形的位置*/position: absolute;top: -105px;left: -39px;}</style>
</head>
<body><div class="star"></div>
</body>
</html>结果展示
这里我们可以清楚的看到，下面的角是平着的，我们可以通过设置一个与背景颜色相同的三角形进行叠盖，覆盖在大的向上的三角形上，就可以在视觉上形成一个五角星，那么我们继续往下看：
新增的代码为新添加的伪元素after的内容：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.star{/*制作向下三角型，看不懂的可以参考不一样的css(一)*/width: 0;height: 0;border-top:40px solid red;border-bottom:40px solid transparent;border-right:40px solid transparent;border-left:40px solid transparent;
/* 让盒子进行居中展示*/margin: 100px auto;
/* 设置定位*/position: relative;}.star::before{
/* 利用伪元素减少html代码，来制作一个向上三角形*/content: "";display: block;width: 0;height: 0;border-top: 40px solid transparent;border-bottom: 69px solid red;border-right: 40px solid transparent;border-left: 40px solid transparent;
/* 设置向上三角形的位置*/position: absolute;top: -105px;left: -39px;}.star::after{
/* 利用伪元素制作覆盖在上面的小三角型 这里是相对上面代码新增的内容*/content: "";display: block;position: absolute;width: 0;height: 0;border-top: 54px solid transparent;border-bottom: 16px solid white;border-right: 40px solid transparent;border-left: 40px solid transparent;
/* 设置三角型的位置*/top: -66px;left: -39px;}</style>
</head>
<body><div class="star"></div>
</body>
</html>运行结果：
这样我们就得到了一个五角星，这样来看我们五角星，有些别扭，那么我们继续来学习下一种方法，来制作五角星。
2.五角星，拼凑法：
通过利用三个三角形，进行拼凑，旋转定位来实现一个五角星。
步骤一：写一个钝角的等腰三角形
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.star{margin: 100px auto;/*设置盒子距离顶部100px 居中显示*/width: 0;/*写一个三角星*/height: 0;border-top: 30px solid red;/*让顶部边框距离变小，其余大于顶部边框且相等就可以得到一个钝角的等腰三角星*/border-left: 40px solid transparent;border-bottom: 40px solid transparent;border-right: 40px solid transparent;transform: rotate(-140deg);/*将得到的图形进行旋转*/position: relative;/*设置定位便于后续盒子进行位置确定*/}</style>
</head>
<body><div class="star"></div></body>
</html>结果：
步骤二：写第二个三角形进行拼凑
通过伪元素，来写第二个三角型，道理相同，制作一个三角型，对其进行旋转，定位，放在合适的位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.star{margin: 100px auto;width: 0;height: 0;border-top: 30px solid red;border-left: 40px solid transparent;border-bottom: 40px solid transparent;border-right: 40px solid transparent;transform: rotate(-140deg);position: relative;}.star::before{content: "";display: inline-block;width: 0;height: 0;border-top: 30px solid red;border-left: 40px solid transparent;border-bottom: 40px solid transparent;border-right: 40px solid transparent;transform: rotate(280deg);position: absolute;top: -50px;left: -15px;}</style>
</head>
<body><div class="star"></div></body>
</html>结果如下图：
步骤三：画出第三个三角形，进行最后的拼凑
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.star{margin: 100px auto;width: 0;height: 0;border-top: 30px solid red;border-left: 40px solid transparent;border-bottom: 40px solid transparent;border-right: 40px solid transparent;transform: rotate(-140deg);position: relative;}.star::before{content: "";display: inline-block;width: 0;height: 0;border-top: 30px solid red;border-left: 40px solid transparent;border-bottom: 40px solid transparent;border-right: 40px solid transparent;transform: rotate(280deg);position: absolute;top: -50px;left: -15px;}.star::after{content: "";display: inline-block;width: 0;height: 0;border-top: 30px solid red;border-left: 40px solid transparent;border-bottom: 40px solid transparent;border-right: 40px solid transparent;transform: rotate(426deg);position: absolute;top: -43px;left: -57px;}</style>
</head>
<body><div class="star"></div></body>
</html>运行结果：
以上就是利用拼凑法将三个三角型进行拼凑，从而得到一个五角星
3.五角星，svg画法：
利用svg标签，设置其路径，来完成一个五角星：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 作为背景图通过css进行插入 */.icon_svg{width: 400px;height: 400px;background: #ccc;border: 3px solid pink;background: url(./svg/index.svg);}</style>
</head>
<body><div class="icon_svg"></div></body>
</html>svg文件部分
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100.94232177734375" height="93.56983947753906" viewBox="0 0 100.94232177734375 93.56983947753906" fill="none"><path d="M1.70058 36.2561L99.2006 36.2561L9.70058 92.2561L51.7006 1.25607L88.7006 92.2561L1.70058 36.2561Z" stroke="rgba(255, 161, 161, 1)" stroke-width="1" fill="#FF0000" ></path>
</svg>运行结果：
利用svg呢我们就可以实现一个比较完美的五角星
4.五角星，利用clip-path属性进行裁剪
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.star {width: 100px;height: 100px;background: red;/* 绘制路径 */clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);}</style>
</head>
<body><div class="star"></div></body>
</html>结果展示
三、结束语
本节内容我们主要讲解了四种纯css画五角星的方法，那么下一节我们继续来学习纯css画小图标，而且我们会学习一个新的内容，svg,通过svg我们可以更加快速的去得到一个css小图标，我们下一节再见。
