Html 在div填充上写入文本

我目前有一个名为

testLine

的div，用于使用css显示颜色三角形效果：

#testLine {
    width: 0;
    height: 0;
    padding-bottom: 47.5%;
    padding-left: 47.5%;
    overflow: hidden;
}
#testLine:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: -1000px;
    border-bottom: 1000px solid transparent;
    border-left: 1000px solid #4679BD;
}

这很好，但问题如下：
我怎样才能在三角形上有一个文本？我的意思是，我试过使用z-index，但没有成功（css不是我的强项），我甚至不知道是否可以在上面写文本。还有什么其他可能性？（我真的不想使用消耗资源的图像作为背景）。我真的很感激任何能帮我找到解决办法的帮助

印刷屏幕-

编辑，html代码：

<div id="testLine"></div>
<div id="text">Testing Testing</div>

测试

将

z-index

与

位置

属性一起使用，例如：

#testLine {
    position: relative;
    z-index: 9999;
}

---

没有

位置

属性

z-index

不起作用

使用对齐的

位置

…类似于：

#text {
    position: absolute;
    /* this will make div fall out of 
              page flow anad align to viewports dimension*/
    top:0;
    /* position to top*/
    left:20px;
    right:0
    /*if needed*/
    bottom:0
    /*if needed*/
}