Fancy Frame

Hi Sasa,

You can build it with GB container block and headline block, and some CSS:
https://www.screencast.com/t/z2U76Lcuv

1. Add a headline block inside the container block.

2. Set the headline block to inline width, add background color to it.

3. Set padding around it, and negative margin top/left to position it.

4. Add an additional CSS class to the headline block, eg. custom-title.

5. Add this CSS based on the additional CSS class:

.gb-headline.custom-title:before {
    content: " ";
    display: block;
    position: absolute;
    left: -18px;
    bottom: -7px;
    border-color: rgba(0,0,0,0) #599396 rgba(0,0,0,0) rgba(0,0,0,0);
    border-style: inset solid inset inset;
    border-width: 0 19px 7px;
}
.gb-headline.custom-title {  
    position: relative;
}

Thank you Ying!

I'm not good at CSS but I'll give it a try.
Can I built it in the Elements? Appearance-->Elements--->New element

Cheers

I'm not sure how to add this CSS code to additional CSS class?

The CSS I provided goes to customizer > additional CSS.

The CSS class custom-title goes to the additional CSS class field in the page editor.
Adding additional CSS classes to blocks: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

I see now :)
Is it possible to use this a few times on the same page or even better to use it on several pages/posts?
Maybe to build it like page hero?

Yes, once the CSS code is added, you can add the CSS class custom-title to multiple blocks that you wish to have the same style :)

That's awesome. Thank you very much!

You are welcome :)