CSS angle a div

Question

I have a div inside another div and I am trying to angle the div so the left side is touch the left side and the right side is touching the top. Is there away to do with CSS?

Here is my code:

.background { 
    background-color:black; 
    height:368px; 
}

.sold { 
    background-color:red; 
    font-size:26px; 
    width:200px; 
    text-align:center; 
    height:40px; 
    color:white; 
    line-height:40px;
}

<div class="background">

<div class="sold">Sold Out</div>

</div>

Here is my jfiddle: http://jsfiddle.net/vakcgvtu/

Answer 1

You can use transform for this:

.background {
    background-color:black;
    height:368px;
    position: relative;
    overflow: hidden;
}
.sold {
    background-color:red;
    font-size:26px;
    width:200px;
    text-align:center;
    height:40px;
    color:white;
    line-height:40px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 37px;
    left: -43px;
    position: relative;
}

<div class="background">
    <div class="sold">Sold Out</div>
</div>

Answer 2

Yes, and simple actually.

Demo http://jsfiddle.net/vakcgvtu/4/

.background {
    background-color:black;
    height:368px;
    position: relative;
    overflow: hidden;
}
.sold {
    background-color:red;
    font-size:26px;
    width:200px;
    text-align:center;
    height:40px;
    color:white;
    line-height:40px;
    position: absolute;
    left: -50px;
    top: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="background">
    <div class="sold">Sold Out</div>
</div>