Html 棘手的三角形设计实现

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

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

请注意，我必须删除大部分内容后，它在这里，但有三角形图案的顶部的内容

我对如何在HTML、CSS和可能的JS（？）中实现三角形做了一些研究，并提出了三种可能的选择：

• 背景图像
• 剪裁div并对其进行定位
• 使用svg并定位

背景图像的问题是，这些瓷砖中的一些稍后会在单击和显示内容等时发生变化，因此它们不应该出现在图片上

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

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

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

如果有任何想法，我将不胜感激。

---

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

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

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

为了克服这一问题，您可能能够在服务器上处理svg，但是您遗漏了最终的维度，如果您使用百分比值来定位内容容器，那么这可能不是问题，而是对代码的轻描淡写

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

---

如果页面很小并且没有太多的内容被分配，那么手工操作可能会更快。

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

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

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

为了克服这一问题，您可能能够在服务器上处理svg，但是您遗漏了最终的维度，如果您使用百分比值来定位内容容器，那么这可能不是问题，而是对代码的轻描淡写

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

---

如果页面很小并且没有分配多少内容，那么手工操作可能会更快。

如果您决定使用SVG路线，那么创建三角形的代码可能会相对较小。将颜色存储在数组中。将三角形之间的水平和垂直距离存储在两个变量中（例如dx和dy）。然后在颜色数组中循环绘制各个三角形

JavaScript代码

var svgNS=”http://www.w3.org/2000/svg";
函数drawTriangles（）{
var svg=document.getElementById（“mySvg”）；
变量颜色=[
[“0000FF”、“0044FF”、“0088FF”、“00CCFF”]，
[“4400FF”、“4444FF”、“4488FF”、“44CCFF”]，
[“8800FF”、“8844FF”、“8888FF”、“88CCFF”]，
[“CC00FF”、“CC44FF”、“CC88FF”、“CCCCFF”]，
];
var n=颜色。长度；
var m=颜色[0]。长度；
var dx=100；
var-dy=75；
对于（变量i=0；i
如果您决定使用SVG路线，那么创建三角形的代码可能相对较小。将颜色存储在数组中。将三角形之间的水平和垂直距离存储在两个变量中（例如dx和dy）。然后在颜色数组中循环绘制各个三角形

JavaScript代码


var svgNS=”http://www.w3.org/2000/svg";
函数drawTriangles（）{
var svg=document.getElementById（“mySvg”）；
变量颜色=[
[“0000FF”、“0044FF”、“0088FF”、“00CCFF”]，
[“4400FF”、“4444FF”、“4488FF”、“44CCFF”]，
[“8800FF”、“8844FF”、“8888FF”、“88CCFF”]，
[“CC00FF”、“CC44FF”、“CC88FF”、“CCCCFF”]，
];
var n=颜色。长度；
var m=颜色[0]。长度；
var dx=100；
变量dy=