html显示宇宙星星 css 如何在html页面上输出一个六角星星呢？

摘要:

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

实现思路:

使用一个向上三星形和一个向下三角形进行叠加，即可形成一个六角的星星，如下所示:

例:

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

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

#liuJiaoXing {

width: 0;

height: 0;

border-left: 80px solid transparent;

border-right: 80px solid transparent;

border-bottom: 160px solid green;

position: relative;

}

#liuJiaoXing:after {

width: 0;

height: 0;

border-left: 80px solid transparent;

border-right: 80px solid transparent;

border-top: 160px solid blue;

position: absolute;

content: "";

top: 40px;

left: -80px;

}

css绘制一个六角星星的示例说明