Custom Top Separator

[thepixelpantry]

Hi there,
A client has requested a custom section separator that I’ve been unable to achieve simply by editing the top separator section. Is there some CSS that can accomplish this specific design?

Here’s what the client requested:

Here’s what Pro’s Top Separator section allowed me to do:

Any advice is much appreciated! Thank you.

[ruenel]

Hello Destiny,

Thanks for writing in! The separator in the example URL may not be possible with the Section Separator feature. What I can suggest is to use a DIV element with a Fixed position relative to the Section and then apply a Border to construct a triangular shape. If you can provide us your WP access, we may be able to create a DEMO for you. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[thepixelpantry]

Hi @ruenel! Thank you for your quick response. We’ve added you as a user. Please confirm you received this.

Thank you!

[ruenel]

Hello Destiny,

You need add a DIV element into your Section element.

You can do that by hovering over the Section element in the Layout tab and press CTRL key on Windows or Command key on Mac and then lick the “+” icon.

Set a width and height for the DIV element and you will then have to position the DIV element as “Absolute” with a negative values for the bottom and right attributes.

And effect is added to rotate the DIV slightly to make it in slanting position.

Kindly check your page now as I have created a DEMO.

[thepixelpantry]

Thank you so much! That’s exactly what I needed. I appreciate your help!

[ruenel]

You are most welcome, Destiny.