[分享]css做一个星星

CSS是网页设计中不可或缺的一部分，通过CSS可以实现各种各样的效果。今天我们来看一下怎样用CSS做一个漂亮的星星。.star { display: inlineblock; width: 0; he...

CSS是网页设计中不可或缺的一部分，通过CSS可以实现各种各样的效果。今天我们来看一下怎样用CSS做一个漂亮的星星。

.star {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid yellow;
  position: relative;
}
.star:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid yellow;
  position: absolute;
  top: -10px;
  left: -20px;
  transform: rotate(-35deg);
}
.star:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid yellow;
  position: absolute;
  top: -10px;
  left: 20px;
  transform: rotate(35deg);
} 

以上是实现星星效果的CSS代码。我们使用伪元素:before和:after来创建出星星的两个角，前置和后置，组成了完整的星形。

还需要注意一下星星的样式设置，通过设置border的宽度和颜色来确定星星的大小和颜色。同时通过position属性来确定星星的位置，还需要使用transform属性来旋转伪元素，使其呈现出期望结果。

使用以上CSS代码，我们可以在HTML文本中添加一个.star类，就可以实现一个漂亮的星星效果，通过修改CSS样式，还可以实现不同大小、颜色、位置的星星。是不是很酷呢？