Html css表td三对角拆分

这就是我想要的结果：

（三名中国人是调类, 调值 及方言点.)

我只需要一个可以在css表中实现的

td类

我看到过使用
png
s或其他图像文件的示例，但我不是在每次加载表时都要加载图像

这里的答案不错：


但我就是不能让它做我想做的事

到目前为止，我的解决方案是只使用一个td，如下所示：

                    <td>
                       调类 →
                       </br>调值 ↘
                       </br>方言点 ↓
                    </td>


调类 →

调值 ↘

方言点 ↓

但看起来有点难看：

您可以稍微更改HTML代码并使用以下样式：


。细胞分裂{
位置：相对位置；
宽度：100px；
高度：75px；
边框：1px实心#513F33；
颜色：#513F33；
溢出：隐藏；
}
.细胞分裂>div{
位置：绝对位置；
左：0；
排名：0；
高度：1米；
线高：1米；
边缘顶部：-.5em；
填充：0 40px 0 0；
宽度：100%；
文本对齐：右对齐；
空白：nowrap；
-webkit变换原点：0底；
变换原点：0底；
}
.cell divided>div>span{
显示：内联块；
}
.cell divided>div:n个子项（1）{
-webkit变换：旋转（13度）；
变换：旋转（13度）；
左：-2px；
顶部：-1px；
}
.cell divided>div:n个子（1）>span{
-webkit变换：旋转（-13度）；
变换：旋转（-13度）；
}
.cell divided>div:n个子项（2）{
-webkit变换：旋转（24度）；
变换：旋转（24度）；
边框底部：1px实心#513F33；
身高：0；
线高：0；
页边顶部：-1px
}
.cell divided>div:n个子项（3）{
-webkit变换：旋转（38度）；
变换：旋转（38度）；
左：-4px；
}
.cell divided>div:n个孩子（3）>span{
-webkit变换：旋转（-38度）；
变换：旋转（-38度）；
}
.cell divided>div:n个子项（4）{
-webkit变换：旋转（53度）；
变换：旋转（53度）；
边框底部：1px实心#513F33；
身高：0；
线高：0；
页边顶部：-1px；
}
.cell divided>div:n个子项（5）{
-webkit变换：旋转（75度）；
变换：旋转（75度）；
左-12px；
顶部：-30px；
}
.cell divided>div:n个孩子（5）>span{
-webkit变换：旋转（-75度）；
变换：旋转（-75度）；
}

调
类
调
值
方
言
点
“我只需要一个td类，我可以在我的css表中实现它。”…是的，祝你好运！HTML元素是矩形的，尽管你可以伪造，否则它在这里可能不会有效。结果是这样的，因为你的网页上有其他样式。你需要检查元素并更正覆盖的样式（例如文本对齐）。它应该如何产生在上面的代码中，所以你可以调整代码或雇佣开发人员来为你做（我不是免费的）。干杯