带三角形的砌体网格？答案

【问题标题】：Masonry grid with triangles?带三角形的砌体网格？
【发布时间】：2015-11-02 16:23:39
【问题描述】：

是否可以创建一个砌体网格，例如 Packery，但使用通过 CSS 或 SVG 完成的三角形？我能够成功地做到这一点，但是将三角形彼此对齐以便没有间隙似乎是一个挑战。

我有以下：

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

.item 代表一个等边三角形，.ud 类只是将它颠倒过来。我的第一个想法是只使用负边距来拉动每个旁边的三角形。但是三角形的大小会有所不同。

【问题讨论】：

请展示你到目前为止所做的尝试

标签： javascript html masonry packery

【解决方案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>

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

【讨论】：