用css画五角星

油菜花666

于 2023-08-10 11:19:29 发布

阅读量1.5k

点赞数

分类专栏： HTML+CSS基础布局文章标签： css 前端 css3

本文链接：https://blog.csdn.net/rose999ying/article/details/132205594

版权

HTML+CSS基础布局专栏收录该内容

15 篇文章 0 订阅

订阅专栏

原理是：三个三角形，其中两个等边三角形交叉出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);
  }