javascript - 带三 Angular 形的 masonry 网格？

Question

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

我有以下内容:

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

.item 表示一个等边三 Angular 形，而 .ud 类只是将其倒置。我的第一个想法是只使用负边距将三 Angular 形拉到每个旁边。但是三 Angular 形的大小会有所不同。

Answer 1

使用 css 创建三 Angular 形很痛苦。然而……

http://apps.eky.hk/css-triangle-generator/

真是太棒了。

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>

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