Подскажите как сверстать такой елемент?
Ответы (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>
