與三角形的砌體網格？

Question

是否有可能創建一個石工網格，比如Packery，但是使用三角形或者通過CSS或SVG完成？我能夠成功地做到這一點，但是將三角形彼此對齊，因此沒有差距似乎是一個挑戰。

我有以下幾點：

<div id="container"> 
    <div class="item"></div> 
    <div class="item ud"></div> 
    <div class="item"></div> 
</div> 

.item代表一個等邊三角形和.ud類只是將其翻轉倒置。我的第一個想法是隻使用負邊距拉三角形旁邊的每個。但三角形的大小會有所不同。

Answer 1

使用css創建三角形是一種痛苦。然而...

http://apps.eky.hk/css-triangle-generator/

它maaaaazing。

SVG是好的option.It的AMAAAAAAZING。

http://www.w3schools.com/svg/svg_polygon.asp

<svg height="210" width="500"> 
 
    <polygon points="100,10 40,198 190,78 10,78 160,198" 
 
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> 
 
</svg>

基本上使用數學和多邊形。