Подскажите как сверстать такой елемент?

Подскажите как сверстать такой елемент(popular)!!!! Пожалуйста

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


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

Автор решения: Plikard

Просто используйте transform: rotate(45deg); в связке с overflow: hidden;

body {
  background: #555;
}

.block {
  height: 300px;
  width: 150px;
  border: 1px solid #000;
  background: #222;
  position: relative;
  overflow: hidden;
}

.block__bage {
  padding: 2px 0;
  width: 100px;
  text-align: center;
  background: red;
  font-size: 10px;
  color: #fff;
  position: absolute;
  right: -25px;
  top: 15px;
  transform: rotate(45deg);
  font-weight: bold;
}
<div class="block">
  <div class="block__bage">
    popular
  </div>
</div>

→ Ссылка