文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php教程>css怎么写五角星

css怎么写五角星

时间:2021-07-28  来源:互联网

今天PHP爱好者给大家带来css写五角星的方法:首先创建一个HTML示例文件;然后通过small名class创建p;最后通过设置“transform: rotate(70deg);”等样式来实现五角星即可。希望对大家有所帮助。

本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑

使用css实现五角星

大五角星

通过small名class创建p

.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;
   
   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;
   
   left: -15px;
   position: absolute;
   top: -9.375px;
   width: 0;
}
.small:before {
   transform: rotate(70deg);
}
.small:after {
   transform: rotate(-70deg);
}

实现效果

2239d042f8e333370b2d15b2ecf332a.png

小五角星

通过smaller名class创建p

.smaller {
   border-color: #7d7d7d transparent transparent transparent;
   border-style: solid;
   border-top-width: 5px;
   border-right-width: 10px;
   border-left-width: 10px;
   
   margin-right: 1.2rem;
   margin-top: 5px;
   margin-bottom: 3.21429px;
   position: relative;
   width: 0;
}
.smaller:before,.smaller:after {
   border-color: #7d7d7d transparent transparent transparent;
   border-style: solid;
   border-top-width: 5px;
   border-right-width: 10px;
   border-left-width: 10px;
   content: '';
   display: block;
   
   left: -10px;
   position: absolute;
   top: -5px;
   width: 0;
}
.smaller:before {
   transform: rotate(70deg);
}
.smaller:after {
   transform: rotate(-70deg);
}

实现效果

a9f3b19e1104afd1a5e4c6b5216c528.png

以上就是css怎么写五角星的详细内容,更多请关注php爱好者其它相关文章!

相关阅读更多 +
最近更新
排行榜 更多 +
元梦之星最新版手游

元梦之星最新版手游

棋牌卡牌 下载
我自为道安卓版

我自为道安卓版

角色扮演 下载
一剑斩仙

一剑斩仙

角色扮演 下载