css-绘制六角星

xyc

    咱们继续之前说的css实现图形的效果方法，今天来说说六角星的实现方法。
    原理：使用transform属性来旋转不同的边。
    效果：
   
    HTML：
   

[HTML] 纯文本查看 复制代码

<div class="div"></div>

    css样式：
   

[CSS] 纯文本查看 复制代码

.div{
	     width: 0;
	     height: 0;
	     float: left;
	     border-left: 50px solid transparent;
	     border-right: 50px solid transparent;
	     border-bottom: 100px solid #cfd810;
	     position: relative;
	    }
	    .div:after{
	     width: 0;
	     height: 0;
	     content: "";
	     border-top: 100px solid #cfd810;
	     border-left: 50px solid transparent;
	     border-right: 50px solid transparent;
	     position: absolute;
	     top: 30px;
	     left: -50px;
	    }

  以上就是六角星的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

范范

支持支持