Есть ли LabelLayout в HTML / SCSS?

Question

Мне нужно что-то похожее на эту библиотеку Android в HTML / SCSS.
Некоторого кода SCSS тоже будет достаточно, поэтому не обязательно должна быть библиотека !

Я бы использовал метку внизу справа внутри родительского элемента div.
Он должен помещаться в контейнер , поэтому он не должен находиться над блоком div или рядом с ним divна правой стороне




Я надеюсь, что вы можете мне помочь и заранее поблагодарить вас

Answer 1

Надеюсь, это поможет вам.

<div class="item" data-box-label="My label"></div>

.item {
     width: 300px;
     height: 150px;
     background-color: black;
     overflow: hidden;
     position: relative;
}
.item::after {
      width: 150px;
      height: 30px;
      background-color: green;
      display: block;
      text-align: center;
      line-height: 30px;
      color: white;
      content: attr(data-box-label);
      bottom: 13%;
      right: -13%;
      position: absolute;
      transform: rotate(-45deg);
}

Основной div должен иметь overflow: hidden (чтобы он не перекрывался) и position: relative, поэтому внутри него находится элемент ::after с position: absolute.Возможно, вы захотите изменить height и width поля метки (элемент :: after), но не забудьте изменить свойства right и bottom, потому что он изменит свою позицию, когда выизменить его размер.

Существует также предварительный просмотр на codepen.io .

РЕДАКТИРОВАТЬ

Обновленная версия отлично работает (посмотрите в комментариях)