---
category: Display
created: '2019-12-01'
description: Create a corner ribbon with CSS flexbox
keywords: css flexbox, css ribbon
thumbnail: /assets/css-layout/thumbnails/corner-ribbon.png
title: Corner ribbon
---

## HTML

```html index.html
<div class="corner-ribbon">
    <!-- The container -->
    <div class="corner-ribbon__inner">
        <!-- The ribbon -->
        <div class="corner-ribbon__ribbon"></div>
    </div>
</div>
```

## CSS

```css styles.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;
}
```

<Playground>
```css styles.css hidden
body {
    height: 24rem;
}
.corner-ribbon {
    position: relative;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    height: 100%;
    width: 100%;
}

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

```html index.html hidden
<div class="corner-ribbon">
    <div class="corner-ribbon__inner">
        <div class="corner-ribbon__ribbon">
        </div>
    </div>
</div>
```
</Playground>