GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

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
Follow me on and to get more useful contents.