Corner ribbon badge

A diagonal corner ribbon for "New", "Sale" or status labels on a card.

ribbon
badge
card
label

Ribbon color#ff3ea5

HTML

<div class="ribbon-box"><span class="ribbon">NEW</span>Card</div>

CSS

:root {
    --ribbon: #ff3ea5;
}

.ribbon-box {
    position: relative;
    width: 200px;
    height: 130px;
    border-radius: 12px;
    background: #1d1f27;
    color: #e8eaed;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.ribbon {
    position: absolute;
    top: 16px;
    right: -36px;
    width: 140px;
    transform: rotate(45deg);
    background: var(--ribbon);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 5px 0;
}

How it works

The card sets position: relative and overflow: hidden so anything sticking out past its rounded corners is clipped. The ribbon is absolutely positioned in the top-right, pushed out past the edge, and rotated 45° so it lies flat across the corner. overflow: hidden trims the ends into a clean diagonal band.

Swap the corner (top/left vs top/right) and rotation sign to move it to a different corner, and change --ribbon for “Sale”, “Beta” or status colors.