Javascript 如何收集4个小三角形形状来制作一个大三角形？

我想制作一个图像背景三角形，通过收集4个小三角形，如下图所示

我如何制作这个三角形图像背景形状的集合？！ .街区{ 宽度：0； 身高：0； 边框：实心20px； 浮动：左； } .清楚{ 明确：两者皆有； } .顶{ 左边距：38px； } .top.left{ 边框颜色：透明绿透明； } .top.right{ 边框颜色：透明绿； } .bottom.left1{ 边框颜色：透明红红透明； } .bottom.mid1{ 边框颜色：蓝蓝红； } .bottom.mid2{ 边框颜色：蓝紫蓝； } .bottom.right1{ 边框颜色：透明紫紫色； }

---

使用边框不起作用…可以使用剪裁。请看下面的代码片段：

伊姆格拉普先生{ 文本对齐：居中； } .起来{ -webkit剪辑路径：polygon100px 0px、0px 150px、200px 150px； 剪辑路径：polygon100px 0px、0px 150px、200px 150px； 利润率：0-100px； } .下来{ -webkit剪辑路径：polygon0px 0px、200px 0px、100px 150px； 剪辑路径：polygon0px 0px，200px 0px，100px 150px； }

---

正如我在评论中提到的，在这种情况下，SVG/canvas可能是更好的解决方案。我不是这方面的专家，但创建一个像您想要的那样简单的模式很简单，我：

---

您总是可以使用您最喜欢的图像编辑器制作图像。否则，您需要满足问题的解释可能比您通常在本网站上得到的解释要长。实际上，您可能需要剪辑CSS中不支持的每个图像，然后分别定位每个图像/div。国际海事组织的问题太广泛了，不能这样做。完全可行，但没有得到很好的支持。您支持哪些浏览器？这些图像是动态的、用户提供的，还是站点上的静态图像？需要更具体地说明您的需要。@SeanStopnik实际上我想给它添加一个功能，即我的站点用户可以通过从静态菜单（如益智游戏）中选择来更改每个小三角形的图像背景。我怎么做这个？！是的，这肯定是您应该使用SVG或画布的地方，但SVG可能是更好的选择。不要费心用CSS强制它-SVG会给你更好的结果，而且比你需要的CSS功能有更好的浏览器支持。非常感谢Ted，这个html适合我的工作吗？！事实上，我想添加一个功能，我的网站用户可以通过从静态菜单（如益智游戏）中选择来更改每个小三角形的图像背景。我怎么做这个？！我不能回答是否合适，那是你的决定。请参阅有关支持的链接。至于如何构建您的应用程序，我建议启动它，如果遇到问题，请返回StackOverflow。谢谢亲爱的@Ted。我会这样做的。但有一个问题：一些成员建议我使用SVG，你的意见是什么@hghayour我想SVG会得到浏览器更好的支持。你比我强。这里有一个+1。喜欢它：奇怪的问题，但一个有趣的问题。这个问题需要一个更好的标题…任何建议？非常好；只是一个问题：实际上我想添加一个功能，我的站点用户可以通过从静态菜单中选择来更改每个小三角形的图像背景，就像一个益智游戏。例如，当用户单击一个小三角形，然后单击另一个三角形时，两个三角形交换？！我怎么做这个？！您可以将不同的元素视为DOM的任何其他元素，并相应地对其进行操作。让我用一个演示来更新答案