带三角形的砌体网格？

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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