<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;}