Home/Explore/

Ribbon

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<div style="
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Background color */
    background-color: #BBB;

    /* Size */
    height: 32px;

    /* Use to position the corners */
    position: relative;
">
    <!-- The content -->
    ...

    <!-- The left side -->
    <div style="
        /* Position */
        bottom: -8px;
        position: absolute;
        left: -24px;

        /* Displayed under the container */
        z-index: -1;

        /* Background */
        border: 16px solid #CCC;
        border-left-color: transparent;
    "
    />

    <!-- The left triangle displayed below the content -->
    <div style="
        left: 0;
        position: absolute;
        top: 100%;

        /* Background */
        border: 8px solid transparent;
        border-bottom-width: 0;
        border-right-width: 0;
        border-top-color: #AAA;
    " />

    <!-- The right triangle displayed below the content -->
    <div style="
        position: absolute;
        right: 0;
        top: 100%;

        /* Background */
        border: 8px solid transparent;
        border-bottom-width: 0;
        border-left-width: 0;
        border-top-color: #AAA;
    " />

    <!-- The right side -->
    <div style="
        /* Position */
        bottom: -8px;
        position: absolute;
        right: -24px;

        /* Displayed under the container */
        z-index: -1;

        /* Background */
        border: 16px solid #CCC;
        border-right-color: transparent;
    "
    />
</div>

Related patterns

Corner ribbon

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