Кирпичная сетка с треугольниками?

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

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

В основном используют математику и полигоны.