Pure CSS Ribbon with transparent background

This is what we want to build with CSS:

The somewhat tricky part is that I should also work with rgba() colors. So the CSS shapes we use to construct the ribbon of aren't allowed to overlap.

The Basic idea is that the ribbon consists of three shapes:

The basic ribbon shape is just a block with rounded edges at the top:

.ribbon {
    position: relative;
    width: 50px;
    height: 100px;
    background: rgba(0,0,0,.4);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

The following code creates the two triangles:

.triangle-top-left {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color: rgba(0,0,0,.4) transparent transparent transparent;
}

.triangle-top-right {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 25px 25px 0;
    border-color: transparent rgba(0,0,0,.4) transparent transparent;
}

But instead of creating three

elements and positioning them inside a .ribbon-container element we can trim that down to just one

with two pseudo elements, absolutely positioned at the bottom of the base .ribbon element:

<div class="ribbon"></div>

.ribbon {
    position: relative;
    width: 50px;
    height: 100px;
    background: rgba(0,0,0,.4);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.ribbon::before,
.ribbon::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: -25px;
    border-style: solid;
}

.ribbon::before {
    left: 0;
    border-width: 25px 25px 0 0;
    border-color: rgba(0,0,0,.4) transparent transparent transparent;
}

.ribbon::after {
    right: 0;
    border-width: 0 25px 25px 0;
    border-color: transparent rgba(0,0,0,.4) transparent transparent;
}

I also created a working CodePen example which takes things a little bit further using Sass variables for the dimensions and color. Feel free to fork.

Hi, I’m Martin Wolf, a Freelance Frontend Web Developer from Germany.
I believe in hard work and sharing what I know.