Creating vertical line within section

[rtha6551]

Hello all first post here

I am using Elementor Pro and cannot seem to find any way to get the effect seen in the attached photo (from another site).

I want to put page sub headings on a 'tab' with a different background colour and a diagonal slash effect. I believe shape dividers can only be applied to full sections and horizontally?

I have almost no knowledge of custom code and have just been using the page builder as it comes. Is it possible to achieve without code or is there a simple way to do this?

Thank you in advance

 

[sms-design]

Add a button in content give the button an id my-button

Now go to the advanced > tab > border > type > solid > top 2px (adjust to suit)

In custom css copy paste the following

#my-button{
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%); /* Change 75% for angle required */
margin-top: -2px; /* Adjust to move button upwards towards border line */
}

Not sure what you meant by a tab, maybe a big screenshot of page would help

 

[rtha6551]

Add a button in content give the button an id my-button

Now go to the advanced > tab > border > type > solid > top 2px (adjust to suit)

In custom css copy paste the following

#my-button{
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}

Not sure what you meant by a tab, maybe a big screenshot of page would help

Thank you, I will try this when I get home!

As for the tab it was simply a way of describing the shape that I am trying to create