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>

棘手的三角设计实施

2 个答案: