[CSS] 純CSS繪製三角形與正六邊形

本篇主要會用到的CSS屬性為：border 。

應該有很多人沒辦法理解，所以一步一步來解釋一下：

1.首先，一般border會看到的樣貌，我們把線寬設大一點來看：

    height: 100px;
    width: 100px;
    border-top: 30px solid #C66;
    border-bottom: 30px solid #6C6;
    border-left: 30px solid #66C;
    border-right: 30px solid #CC6;

2.應該可以看到上左下右的邊框交接處都是斜線，所以我們可以利用這個特性來繪製三角形：

    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;

3.做到這裡大概有些人就懂了，三角形出來，六角形就不遠了，我們用三個div（三角形,長方形，三角形）就可以製作出一個六角形了：

HTML部分

<div id="hexagon1">
    <div class="hexagon-top"></div>            
    <div class="hexagon-mid"></div>            
    <div class="hexagon-bottom"></div>            
</div>

CSS部分

#hexagon1 .hexagon-top{
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
#hexagon1 .hexagon-mid{
    width: 104px;
    height: 60px;
    background-color: #6C6;
}
#hexagon1 .hexagon-bottom{
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

4.剛剛範例中的div是從上到下，最後一樣用三個div，但是改成從左到右來繪製六角形：

HTML部分

<div id="hexagon2">
    <div class="hexagon-top"></div>
    <div class="hexagon-mid"></div>            
    <div class="hexagon-bottom"></div>            
</div>

CSS部分

#hexagon2 .hexagon-top{
    float: left;
    border-right: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
}
#hexagon2 .hexagon-mid{
    float: left;
    width: 60px;
    height: 104px;
    background-color: #6C6;
}
#hexagon2 .hexagon-bottom{
    float: left;
    border-left: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
}