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

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>

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