CODEWITHSUNDEEP
htmlcss
user979331
user979331

Reputation: 11861

CSS angle a div

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/

Upvotes: 5

Views: 9056

Answers (4)

Alex Char
Alex Char

Reputation: 33218

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>

Upvotes: 7

ism
ism

Reputation: 298

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;

Upvotes: 1

Arbel
Arbel

Reputation: 30989

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>

Upvotes: 2

Ian Hazzard
Ian Hazzard

Reputation: 7771

Here, I changed you fiddle with transform rotate and position relative CSS.

JSFiddle

Upvotes: 1

Related Questions