帶三角形的砌體網格？

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是不錯的選擇。它是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> 

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