CODEWITHSUNDEEP
cssrotatetransform
user3465849
user3465849

Reputation: 31

Rotated div comes out over its parent div

I want to rotate a div inside another div, but the rotated div comes out above the another div. I attached an image to understand it better. This is what I have

And this is what I want

This is my code:

.offer{
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 5px 0;
    position: absolute;
    top: 23px;
    z-index: 100;
    left: -33px;
    width: 140px;
    box-shadow: 0 1px 10px #666;
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
    background: -moz-linear-gradient(top, #1e5799 0%, #e09013 1%, #e5b300 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(1%, #e09013), color-stop(100%, #e5b300));
    background: -webkit-linear-gradient(top, #1e5799 0%, #e09013 1%, #e5b300 100%);
    background: -o-linear-gradient(top, #1e5799 0%, #e09013 1%, #e5b300 100%);
    background: -ms-linear-gradient(top, #1e5799 0%, #e09013 1%, #e5b300 100%);
    background: linear-gradient(to bottom, #1e5799 0%, #e09013 1%, #e5b300 100%);
}
.content{
    margin:0 auto;
    top:50px;
    position: relative;
    width: 20%;
    height: 200px;
    background-color: lightgray;
}
<div class="content">
  <div class="offer">Offer</div>
</div>

Upvotes: 2

Views: 1487

Answers (1)

Jordi Nebot
Jordi Nebot

Reputation: 3401

Just add overflow:hidden to your .content

.offer{
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 5px 0;
    position: absolute;
    top: 23px;
    z-index: 100;
    left: -33px;
    width: 140px;
    box-shadow: 0 1px 10px #666;
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
    background: -moz-linear-gradient(top, #1e5799 0%, #e09013 1%, #e5b300 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(1%, #e09013), color-stop(100%, #e5b300));
    background: -webkit-linear-gradient(top, #1e5799 0%, #e09013 1%, #e5b300 100%);
    background: -o-linear-gradient(top, #1e5799 0%, #e09013 1%, #e5b300 100%);
    background: -ms-linear-gradient(top, #1e5799 0%, #e09013 1%, #e5b300 100%);
    background: linear-gradient(to bottom, #1e5799 0%, #e09013 1%, #e5b300 100%);
}
.content{
    margin:0 auto;
    top:50px;
    position: relative;
    width: 20%;
    height: 200px;
    background-color: lightgray;
    overflow: hidden;
}
<div class="content">
  <div class="offer">Offer</div>
</div>

Upvotes: 1

Related Questions