[分享]css中怎么做星星

CSS中怎么做星星？

/* 第一种方法：使用伪元素 */
.star {
  position: relative;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 32px solid #FFD700;
}
.star::before,
.star::after {
  content: ';
  position: absolute;
  top: 11px;
  left: -16px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 32px solid #FFD700;
  transform: rotate(-35deg);
}
.star::after {
  left: 16px;
  transform: rotate(35deg);
}

/* 第二种方法：使用transform */
.star {
  position: relative;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 32px solid #FFD700;
  transform: rotate(35deg) skew(10deg);
  transform-origin: bottom center;
}

/* 第三种方法：使用SVG */
.star svg {
  fill: #FFD700;
} 

以上是制作星星的三种方法，分别使用了伪元素、transform以及SVG。可以根据实际情况选择合适的方法。