CSS corner a div

Question

I have a div inside another div, and I'm trying to tilt the div so that the left side touches the left side and the right side touches the top. Is there access to 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 to do 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 just really.

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> 

Answer 3

Here I changed the script with transform rotate and position relative CSS.

Jsfiddle

Answer 4

http://jsfiddle.net/vakcgvtu/2/

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