Реализация проекта Tricky Triangle

Question

Я работаю над веб-сайтом в настоящий момент и столкнулся с проблемой с треугольным паттерном.

Дизайнер издевались сайт с треугольными плитками и узорами:

Обратите внимание, что я должен был удалить большую часть контента, чтобы разместить его здесь, но есть содержание на верхней треугольной шаблон.

Я сделал некоторые исследования о том, как реализовать треугольники в HTML, CSS и, возможно, JS и придумал три возможных варианта (?):

• фоновое изображение
• стрижкой дивы и позиционируют их
• с помощью SVG и позиционирования этого

проблему с фоновым образом является то, что некоторые из этих плиток будут позже изменить на клик и показать вещи и т.д. Так что они на самом деле не должны 't be on a picture

Я начал обрезать и позиционировать divs, но это просто происходит навсегда, и я начинаю чувствовать, что это не может быть лучшим решением. Нагрузки возиться, и я думаю, что позже у меня возникнут проблемы с несоответствиями

У меня нет большого опыта работы с svg, но мне пришлось бы рисовать их все по одному и позиционировать их также (правильно? предположение). Не похоже на подход с лучшей практикой.

Есть ли у кого-нибудь какие-либо данные о том, как я могу это решить, или мне просто нужно выполнить одно из решений, названных выше, поскольку нет более быстрого пути.

Я бы очень признателен за любые идеи. Спасибо Антон

Answer 1

Если вы решили пойти с маршрутом SVG, тогда код для создания треугольников может быть относительно небольшим. Храните цвета в массиве массивов. Храните горизонтальное и вертикальное расстояние между треугольниками двумя переменными (например, dx и dy). Затем проведите через массив цветов, чтобы нарисовать отдельные треугольники.

JavaScript код ...

var svgNS = "http://www.w3.org/2000/svg"; 
 

 
function drawTriangles() { 
 
    var svg = document.getElementById("mySvg"); 
 
    var colors = [ 
 
    ["#0000FF", "#0044FF", "#0088FF", "#00CCFF"], 
 
    ["#4400FF", "#4444FF", "#4488FF", "#44CCFF"], 
 
    ["#8800FF", "#8844FF", "#8888FF", "#88CCFF"], 
 
    ["#CC00FF", "#CC44FF", "#CC88FF", "#CCCCFF"], 
 
    ]; 
 
    var n = colors.length; 
 
    var m = colors[0].length; 
 
    var dx = 100; 
 
    var dy = 75; 
 
    for (var i = 0; i < n; i++) { 
 
    for (var j = 0; j < m; j++) { 
 
     var polygon = document.createElementNS(svgNS, "polygon"); 
 
     var point0 = svg.createSVGPoint(); 
 
     var point1 = svg.createSVGPoint(); 
 
     var point2 = svg.createSVGPoint(); 
 
     if ((i + j) % 2 === 0) { 
 
     point0.x = j * dx; 
 
     point0.y = i * dy; 
 
     point1.x = (j + 1) * dx; 
 
     point1.y = (i + 1) * dy; 
 
     point2.x = (j + 1) * dx; 
 
     point2.y = (i - 1) * dy; 
 
     } else { 
 
     point0.x = (j + 1) * dx; 
 
     point0.y = i * dy; 
 
     point1.x = j * dx; 
 
     point1.y = (i - 1) * dy; 
 
     point2.x = j * dx; 
 
     point2.y = (i + 1) * dy; 
 
     } 
 
     polygon.setAttribute("fill", colors[i][j]); 
 
     polygon.points.appendItem(point0); 
 
     polygon.points.appendItem(point1); 
 
     polygon.points.appendItem(point2); 
 
     svg.appendChild(polygon); 
 
    } 
 
    } 
 
} 
 
drawTriangles();

<svg id="mySvg" width="400" height="225"></svg>

Answer 2

Если опции css являются опцией, я бы рекомендовал их использовать.

https://css-tricks.com/examples/ShapesOfCSS/

Однако вы решили создать границы контейнеров, если вы вставляете SVG прямо в HTML, вы можете получить доступ все элементы так же, как доступ к HTML-элементам, и с ними вы можете получить их вершин. Таким образом, вы можете использовать эту информацию для создания фигур.

Недостатком этого подхода является то, что он сильно зависит от javascript, если он отключен или сбой, полный макет также не сработает. Но вы можете реагировать на изменения компоновки во время выполнения.

Чтобы преодолеть это, вы можете обработать svg на сервере, но там вы упускаете окончательные размеры, что может быть не так, если вы используете процентные значения для размещения контейнеров контента, но головоломка для кода ,

В целом, если это правильно, при создании такого макета, где контент размещается в треугольниках, в каждом случае потребуется много кода.

Если страница будет оставаться маленькой и не будет назначено много контента, чем делать все вручную вручную.