使用css制作出一个星星

有多种方法使用 CSS 创建星星，这里提供三种常见且效果不错的方案：

1. 使用单个元素和伪元素:

这是最简洁的方法，利用 ::before 和 ::after 伪元素创建星星的四个角。

.star {
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: relative;
  display: inline-block; /* 或 block */
}

.star::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: yellow; /* 星星颜色 */
  transform: rotate(45deg);
}

.star::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: yellow; /* 星星颜色 */
  transform: rotate(-45deg);
}

2. 使用两个三角形叠加:

这种方法使用两个三角形，旋转并叠加形成星星。

.star {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 17px solid yellow; /* 星星颜色 */
  position: relative;
  display: inline-block;
}

.star::after {
  content: "";
  position: absolute;
  top: 3px; /* 调整位置 */
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 17px solid yellow; /* 星星颜色 */
  transform: rotate(35deg); /* 调整旋转角度 */
}

3. 使用 SVG:

SVG 是创建复杂图形的最佳选择，可以更精确地控制星星的形状。

<svg width="20" height="20" viewBox="0 0 20 20" fill="yellow">
  <polygon points="10,1 13,19 1,7 19,7 7,19" />
</svg>

你可以将这段 SVG 代码直接嵌入 HTML 中，或者将其保存为一个独立的 SVG 文件，然后在 HTML 中引用它。

选择哪种方法？

• 简单快速: 方法一最简洁，适合快速创建简单的五角星。
• 灵活可控: 方法二可以通过调整 border 和 transform 属性来控制星星的形状和大小。
• 精确且可缩放: SVG 方法最精确，可以创建更复杂的星星形状，并且可以无损缩放。

额外提示:

• 可以通过修改 background-color 或 fill 属性来改变星星的颜色。
• 可以通过修改 width 和 height 属性来调整星星的大小。
• 可以使用 transform: rotate() 旋转星星。

希望这些信息能帮到你! 选择最适合你需求的方法，开始你的星星创作吧!