Question

我目前有一个名为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这不是我的强项），我不知道是否有可能在其上写文字。还有什么其他可能性？（我真的不想使用资源消耗图像作为背景）。我非常感谢任何可以帮助我找到解决方案的帮助。

PrintScreen - http://i.imgur.com/dRCKVNO.jpg

编辑，HTML代码：

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

Answer 1

使用position对齐...类似于：

#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*/
}

working demo

Answer 2

将z-index与position属性一起使用，例如：

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

没有position属性z-index无法正常工作

在div填充上写文本

2 个答案: