css - 旋转后的 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

只需将 overflow:hidden 添加到您的 .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>