Add ribbon to a container

Hi Johan,

Can you add cu-best-ribbon to the Container Block to which you want to add the ribbon? I’ll try to see what CSS code is needed to make such a ribbon or a similar ribbon appear.

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

One last thing, from this link you provided: https://css-generators.com/ribbon-shapes/ – which specific ribbon are you going for?

Here’s a sample code you can try adding through Appearance > Customize > Additional CSS:

.gb-container.cu-best-ribbon{
    position: relative;
}
.gb-container.cu-best-ribbon::after {
    content: "Best Choice!";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items:center;
    text-align:center;
    font-weight: 900;
    width: 80px;
    top:-12px;
    left: 30px;
    height: 100px;
    clip-path: polygon(0 0, 100% 0, 100% 79%, 50% 100%, 0 79%);
    background: #f9ca01;
}

.gb-container.cu-best-ribbon::before{
    content: "";
    position: absolute;
    display: flex;
    justify-content: center;
    align-items:center;
    text-align:center;
    font-weight: 900;
    width: 12px;
    top:-12px;
    left: 19px;
    height: 12px;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    background: #b39309;
} 

There’s an extra } above the new code causing a syntax error. Can you remove that?

You can copy and paste your CSS codes here to check for any syntax errors: http://csslint.net/

You’re welcome, Johan!