品易云推流 关闭
文章详情页
文章 > css教程 > css写五角星的方法

css写五角星的方法

头像

小妮浅浅

2021-07-17 17:21:461339浏览 · 0收藏 · 0评论

方法说明

1、创建一个HTML示例文件。

2、通过small名class创建div;最后通过设置“transform: rotate(70deg);”等样式来实现五角星即可。

实例

.small-all{
display: flex;
margin:1rem 13%;
}
.small {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    height: 0;
    margin-top: 9.375px;
    margin-bottom: 6.02679px;
    position: relative;
    width: 0;
    margin: 2rem 0.8rem;
}
.small:before,.small:after {
    border-color: #7d7d7d transparent transparent transparent;
    border-style: solid;
    border-top-width: 9.375px;
    border-right-width: 15px;
    border-left-width: 15px;
    content: '';
    display: block;
    height: 0;
    left: -15px;
    position: absolute;
    top: -9.375px;
    width: 0;
}
.small:before {
    transform: rotate(70deg);
}
.small:after {
    transform: rotate(-70deg);
}

以上就是css写五角星的方法,希望对大家有所帮助。更多css学习指路:css教程

 

本文转载于php中文网,如有侵犯联系作者修改。

关注

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图