棘手的三角形设计实现

Question

我目前正在网站上工作，运行遇到了三角形图案的问题。

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

请注意，我不得不删除大部分内容以 post 它在这里，但三角形图案顶部有内容。

我研究了如何在 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>

棘手的三角形设计实现

Tricky Triangle Design implementation

html

css

svg

css-shapes

clip-path