輸入文字

Question

我現在有一個div稱爲用於使用CSS來顯示彩色三角效果testLine：

#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不行