与三角形的砌体网格？

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>

基本上使用数学和多边形。