2

введите сюда описание изображения

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

2
  • хотелось бы на чистом css
    – fenq2
    8 авг 2020 в 13:38
  • вы можете предложить решение в ответе, буду благодарен. Так как на словах не очень понимаю как. Как сделать это скрытие?
    – fenq2
    8 авг 2020 в 13:41

1 ответ 1

4

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.