html页面中星星怎么写,css 如何在html页面上输出一个五角星呢？

摘要:

下文讲述使用css脚本在页面上绘制一个五角星的方法分享,如下所示:

实现思路:

绘制三个不同的三角形，进行不同方向的旋转和叠加可形成一个五角星，如下所示:

例:

使用css绘制一个五角星的示例分享

maomao365.com

css 绘制 五角星星 的示例分享

---

#wuJiaoXing{

margin: 50px 0;

position: relative;

display: block;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid green;

border-left: 100px solid transparent;

transform: rotate(35deg);

}

#wuJiaoXing:before {

border-bottom: 80px solid blue;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -65px;

display: block;

content: '';

transform: rotate(-35deg);

}

#wuJiaoXing:after {

position: absolute;

display: block;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid orange;

border-left: 100px solid transparent;

transform: rotate(-70deg);

content: '';

}

css绘制五角星的示例分享