css-绘制六边形

xyc

    咱们继续之前说的css实现图形的效果方法，今天来说说六边形的实现方法。
    原理：在长方形上面和下面各放置一个三角形。
    效果：
   
    html：
   

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

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

    css样式：
   

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

.div {
	      width: 100px;
	      height: 55px;
	      float: left;
	      background: #000001;
	      position: relative;
	      margin: 10px auto;
	    }
	    .div:before {
	      content: "";
	      width: 0;
	      height: 0;
	      position: absolute;
	      top: -25px;
	      left: 0;
	      border-left: 50px solid transparent;
	      border-right: 50px solid transparent;
	      border-bottom: 25px solid #000001;
	   }
	   .div:after {
	     content: "";
	     width: 0;
	     height: 0;
	     position: absolute;
	     bottom: -25px;
	     left: 0;
	     border-left: 50px solid transparent;
	     border-right: 50px solid transparent;
	     border-top: 25px solid #000001;
	    }

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

范范

加油