Css 分区分为五组

这里我试着把a分成5个不同的三角形。 我曾尝试使用CSS使用边框，但无法实现所需的输出。谁能给我指一下正确的方向吗。我应该如何实现此输出。

.box{
显示器：flex；
宽度：100%；
高度：100vh；
背景色：#ccc；
}
特雷格尔先生{
宽度：20%；
高度：400px；
边框：3倍实心#000；
}

---

如果只是关于视觉效果，请使用多个背景：

.box{
宽度：250px；
高度：150像素；
背景：
线性渐变（至右下角，透明49.5%，绿色50%）右下角/50%50%，
线性渐变（至右下角，透明49.5%，紫色50%）右下角/50%200%，
线性渐变（至左下角，透明49.5%，黄色50%）左下角/50%50%，
线性渐变（至左下角，透明49.5%，红色50%）左下角/50%200%，
蓝色
背景重复：无重复；
}

---

SVG和许多多边形

div{
宽度：80%；
保证金：1em自动；
}

a如果我想要一个div，因为我必须在五个不同的形状中放置五个不同的图像。@Husna你应该准确地说：）我将使用图像进行编辑我在代码中提到过我需要单独的div形状，你能将它们单独设置吗divs@Husna你只是说5个不同的三角形，而不是5个不同的三角形divs。无论如何，检查更新我想在三角形中添加不同的图像。我尝试过使用fill=“url（）”但它不起作用。你能建议我该怎么做吗。@Pauli\u D这对我很有帮助，我感谢你抽出时间：）