css实现五角星样式

CSS实现五角星样式

/* CSS代码 */
.star {
  /* 设置宽高为0，用border-width代替 */
  width: 0;
  height: 0;
  border-width: 20px 10px 0 10px;
  /* 设置边框颜色和透明度 */
  border-color: #f00 transparent transparent transparent;
  /* 使边框变平滑，配合border-width使用 */
  border-style: solid;
  /* 旋转45度及其倍数，使五角星正立 */
  transform: rotate(45deg);
}

五角星是一种经常使用的形状，比如用于表示评级或者收藏等等。在CSS中，可以用一些技巧来实现五角星的样式。我们可以通过设置border-width的值来控制五角星的大小，同时使用border-color和border-style来控制颜色和边框类型。此外，我们还可以利用transform属性来旋转五角星，使其正立。下面是一个非常简单的示例代码。