版权声明:尊重原创! https://blog.csdn.net/weixin_42675488/article/details/82825859
<div class="ribbon">
<div class="wrap">
<span class="ribbon6">丝带效果</span>
</div>
</div>
// 固定一个宽高,使里面的子元素(before,after,ribbon6)溢出隐藏
.ribbon{
position: relative;
width: 216px;
height: 216px;
padding-top: 8px;
overflow: hidden;
color: #fff;
}
.wrap {
width: 188px;
height: 188px;
background: #ddd;
position: absolute;
padding: 10px;
margin: 0 auto;
}
.wrap:before {
content: " ";
display: block;
border-radius: 8px 8px 0 0;
width: 40px;
height: 8px;
position: absolute;
right: 80px;
top: -8px;
background: #4d6530;
}
.wrap:after{
content: "";
display: block;
border-radius: 0 8px 8px 0;
width: 8px;
height: 40px;
position: absolute;
right: -8px;
top: 80px;
background: #4d6530;
}
// 旋转角度
.ribbon6{
position: absolute;
top: 15px;
right: -65px;
display: inline-block;
text-align: center;
width: 200px;
height: 40px;
line-height: 40px;
z-index: 2;
overflow: hidden;
transform: rotate(45deg);
border: 1px dashed;
background: #57dd43;
box-shadow: 0 0 0 3px #57dd43,
0 21px 5px -18px rgba(0,0,0,.6);
}