css - Why won't my divs overlap? -

i'm trying these divs overlap , have text inside triangle text can moved around outside triangle.

jsfiddle

this html+css:

<div class="tri">     <div class="test">         test     </div> 

.tri {     width: 0;     height: 0;     border-top: 100px solid black;     border-left: 100px solid transparent;     position:relative; }  .test {     display:inline-block;     -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);     -ms-transform: rotate(45deg);     -o-transform: rotate(45deg);     filter: progid:dximagetransform.microsoft.basicimage(rotation=3);     zoom:1;     margin-top:-80px;     margin-left:-80px;     color:red; } 

you can use position: relative; container element , use position: absolute; child element, way, absolute positioned element won't flow out in wild, , relative parent element, overlapped way

demo

---

also it's css triangle borders , height , width set 0 respectively, cannot expect child element overlap triangle