CODEWITHSUNDEEP
csstransformoverlap
CR47
CR47

Reputation: 923

Why won't my divs overlap?

I'm trying to get these divs to overlap and have the text be inside the triangle but the text can only be moved around outside the triangle.

JSFiddle

This is the HTML+CSS:

<div class="tri">
    <div class="test">
        This is 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;
}

Upvotes: 0

Views: 780

Answers (2)

Jesper
Jesper

Reputation: 91

I'm not entirely sure of what you are trying to achive here. If you want the text to be inside the black triangle, you could just edit out

display:inline-block;

Worked in JSFiddle, only tested in FireFox and Chrome though, might want to check more browsers.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

You can simply use position: relative; for the container element and than use position: absolute; for the child element, this way, your absolute positioned element won't flow out in the wild, and will be relative to the parent element, also it will be overlapped this way

Demo

Also it's a CSS triangle with borders and height and width set to 0 respectively, so you cannot expect an the child element to overlap the triangle

Upvotes: 3

Related Questions