Corner ribbon

<div class="container">
<!-- The container -->
<div class="container__wrapper">
<!-- The ribbon -->
<div class="container__ribbon">
...
</div>
</div>
</div>
.container {
position: relative;
}
.container__wrapper {
/* Displayed at the top left corner */
left: 0px;
position: absolute;
top: 0px;
/* Size */
height: 100px;
width: 100px;
/* Hide the part of its children which is displayed outside */
overflow: hidden;
}
.container__ribbon {
/* Position */
left: -64px;
position: absolute;
top: 32px;
/* Size */
height: 24px;
width: 206px;
/* Displayed diagonally */
transform: rotate(-45deg);
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
/* Centerize the text content */
text-align: center;
}

Use cases

You can add a ribbon to a pricing table to indicate the most popular option.
Popular

See also

Fixed at corner

Ribbon