棘手的三角形设计实施[关闭]

Question

我目前正在开发一个网站，但遇到了三角形图案的问题。

设计师用三角形瓷砖和图案模拟了网站：

请注意，我必须删除大部分内容才能在此处发布，但三角形图案顶部有内容。

我对如何在 HTML、CSS 和可能的 JS(?) 中实现三角形进行了一些研究，并提出了三个可能的选项：

• 背景图片
• 裁剪 div 并定位它们
• 使用 svg 并将其定位

背景图片的问题在于，其中一些图块稍后会在点击时发生变化并显示内容等。所以它们真的不应该出现在图片上

我已经开始剪辑和定位 div，但这需要很长时间，我开始觉得这不是最好的解决方案。大量的摆弄，我想我以后会遇到不一致的问题

我没有太多使用 svg 的经验，但我必须一个一个地绘制它们并定位它们（​​对吗？这是一个假设）。似乎不是最佳实践方法。

是否有人对我如何解决这个问题有任何意见，或者我是否只需要遵循上述解决方案之一，因为没有更快的方法。

我真的很感激任何想法。 谢谢安东

Answer 1

如果 css 形状是一个选项，我建议使用它们。

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

无论您选择如何创建容器的边界，如果您将 svg 直接嵌入到 html 中，您就可以像访问 html 元素一样访问所有元素，并且可以使用它们获取它们的顶点。这样您就可以使用该信息来创建形状。

这种方法的缺点是它高度依赖于javascript，如果它被禁用或失败，完整的布局也会失败。但是您可以在运行时对布局更改做出反应。

要克服这个问题，您也许可以在服务器上处理 svg，但是您会遗漏最终尺寸，如果您使用百分比值来定位内容容器，这可能不是问题，而是编码问题。

总而言之，如果做对了，创建这样一个内容以三角形排列的布局在每种情况下都需要大量代码。

如果页面保持较小并且分配的内容不多，那么手动完成所有操作可能会更快。

Answer 2

如果您决定使用 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>