css-绘制五边形

xyc

    咱们继续之前说的css实现图形的效果方法，今天来说说五边形的实现方法。
    效果：
   
    HTML：
   

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

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

    css样式：
   

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

	    .div{
	      width: 60px;
	      float: left;
	      position: relative;
	      border-width: 52px 20px 0;
	      border-style: solid;
	      border-color: #711ee2 transparent;
	    }
	    .div:before{
	      content: "";
	      position: absolute;
	      width: 0;
	      height: 0;
	      top: -92px;
	      left: -20px;
	      border-width: 0 50px 40px;
	      border-style: solid;
	      border-color: transparent transparent #711ee2;
	    }

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