用css画五角星

原理是：三个三角形，其中两个等边三角形交叉出4个角，叠加第三个三角形，形成5角，代码如下：

<span class="star"></span>
.star {
    position: relative;
    width: 0;
    height: 0;
    border-right: 3px solid transparent;
    border-bottom: 8px solid #888888;
    border-left: 3px solid transparent;
    transform: rotate(35deg);
    &:hover {
      border-bottom-color: #b32620;
      &::before {
        border-bottom-color: #b32620;
      }
      &::after {
        border-bottom-color: #b32620;
      }
    }
  }
  .star:before {
    content: "";
    position: absolute;
    top: 23.7px;
    left: -10.4px;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 7px solid #888888;
    border-left: 10px solid transparent;
    transform: rotate(-36deg);
  }
  .star:after {
    content: "";
    position: absolute;
    top: 23.7px;
    left: -8.4px;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 7px solid rgba(136, 136, 136, 1);
    border-left: 10px solid transparent;
    transform: rotate(35deg);
  }