Как сделать лэйбл у блока?

Question

Как можно сделать такой лэйбл у блока? Не получается сделать эффект скругления за блоком. Сам лэйбл делаю прямоугольником с rotate в -45deg + overflow: hidden у родителя.

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

БЛОГ НА HUSL

Как сделать лэйбл у блока?

Ответы (1 шт):