Corner ribbon
HTML
<div class="corner-ribbon">
<!-- The container -->
<div class="corner-ribbon__inner">
<!-- The ribbon -->
<div class="corner-ribbon__ribbon"></div>
</div>
</div>
CSS
.corner-ribbon {
position: relative;
}
.corner-ribbon__inner {
/* Displayed at the top left corner */
left: 0px;
position: absolute;
top: 0px;
/* Size */
height: 4rem;
width: 4rem;
/* Hide the part of its children which is displayed outside */
overflow: hidden;
}
.corner-ribbon__ribbon {
/* Position */
left: 1rem;
position: absolute;
top: 1rem;
/* Size */
height: 1.5rem;
width: 5.656rem;
/* Displayed diagonally */
transform: translate(-38px, -8px) rotate(-45deg);
/* Background color */
background-color: #d1d5db;
/* Centerize the text content */
text-align: center;
}
Demo