回転したdivが親divの上に出る

Question

divを別のdivの中で回転させたいが、回転したdivが別のdivの上に出てくる。私はそれをよりよく理解するためにイメージを付けました。 This is what I have

And this is what I want

これは私のコードです：

.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>

Answer 1

ちょうどあなたの.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>

に overflow:hiddenを追加