CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed

Corner ribbon

<div style="
    position: relative;
    <!-- The container -->
    <div style="
        /* 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;
        <!-- The ribbon -->
        <div style="
            /* 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.

Related patterns

Fixed at corner


Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!