Html CSS图像网格中的CSS三角形

我正在尝试排列一个图像网格（三角形），并在每个网格中显示文本，这将从SQL中提取。我已经设法把图片排好并调整大小（我在网页设计方面不是专家），但是我尽可能地尝试，我不能把三角形弄对。似乎每次我尝试时，他们都拒绝显示，在Chrome的开发工具中查看

我需要找到一种方法，使文本显示如下，我不确定的三角形在CSS的事情是最好的方式这样做，请让我知道你的意见

testingtest
  testtet
    tes
     t

这是我到目前为止得到的

标题
#容器1{
宽度：100%；
} 
#容器1.图像{
浮动：左；
宽度：220px；
高度：204px；
背景:#369；
颜色：#fff；
文本对齐：居中；
} 
#容器1.映像p{
身高：100%；
保证金：0；
填充：0；
边框：1px实心#123；
}
#主机箱{
保证金：0自动；
顶部：50px；
左：400px；
宽度：1200px；
高度：100px；
}
#三角{
边框颜色：透明白色透明；
边框样式：实心；
边框宽度：0px 100px 100px 100px；
高度：0px；
宽度：0px；
}

三角形墙


测试

CSS不会处理文本的任意多边形边界（例如将文本拟合到三角形多边形中）

您需要使用某种Javascript实现来处理DOM或SVG