회전 된 div가 상위 div를 통해 나옵니다

Question

다른 div 내부에서 div를 회전하려고하지만 회전 된 div가 다른 div보다 위에 나오기를 원합니다. 더 잘 이해하기 위해 이미지를 첨부했습니다.

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

,312,937에 overflow:hidden을 추가 And this is what I want

이 This is what I have

내 코드입니다