javascript - 带三角形的砌体网格？

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/

太棒了。

SVG 是一个不错的选择。这太棒了。

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>

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