Как можно сделать такой лэйбл у блока? Не получается сделать эффект скругления за блоком. Сам лэйбл делаю прямоугольником с rotate в -45deg + overflow: hidden у родителя.
1 ответ
.block {
box-sizing: border-box;
padding: 5px;
position: relative;
display: inline-block;
overflow: hidden;
}
.block_content {
width: 200px;
height: 200px;
position: relative;
border: 2px solid lightgray;
box-sizing: border-box;
background: white;
z-index: 50;
}
.block_label-front,
.block_label-back{
position: absolute;
width: 200px;
height: 50px;
transform: rotate(-45deg);
bottom: 25px;
right: -50px;
background: darkblue;
}
.block_label-front {
z-index: 100;
box-shadow: -2px -2px 4px rgba(0, 0, 0, .3);
}
.block_label-back {
position: absolute;
z-index: 1000;
bottom: 50px;
right: -26px;
z-index:0;
}
<div class="block">
<div class="block_content"></div>
<div class="block_label-front"></div>
<div class="block_label-back"></div>
</div>