CSS3 Hexagon Tile

.hex_top_triangle{    width: 0;    border-bottom: 30px  solid  #6C6;    border-left: 52px solid transparent;     border-right: 52px solid transparent;}. hex_center_rect{    width: 104px;    height: 60px;     background-color:  #6C6;}. hex_bottom_triangle{    width: 0;    border-top: 30px  solid  #6C6;    border-left: 52px solid transparent;     border-right: 52px solid transparent;}. float{    float:left;    margin-left:1px;     margin-bottom: -29px;}. row_even{    clear: left;    margin-left:52px;   / * margin-top:30px;*/}.hex_even{    float:left;    margin-left:1px;} 

<! Doctype html>
The imitation of the honeycomb-like composition of semi-finished products, from a simple law evolved a colorful effect. Deep into the understanding of CSS, you can make a simple hexagon after the difficulty becomes, how to put these simple hexagon layout, my first sense is to put a hexagon into the div and then through the transformation of what the realization, unfortunately not enough thinking, halfway give up, reference to mature code through div arrangement, clear : Left to clear the floating, to achieve the floating element of the line, the other margin-bottom:-30px, in order to make the hexagon up the sharp angle inserted, the two lines of the overall left shift corresponding pixels.


CSS3 Hexagon Tile