Is it possible to add a border to the polygon angle in separator?

[JenniferS]

I’m trying to use Angle In on a section but am hoping there is some way to add a border along one edge of the polygon. I have experimented with adding a stroke to the svg element but it adds to all sides. I thought of changing each side so that three of the four sides are the fill color and one side is, say, red, but have been unsuccessful thus far. Any suggestions? TY!

[prakash_s]

Hello @jlswilton,
Thanks for writing to us.

You can use custom CSS code to add the border to the angle separator. You need to add the custom CSS code to the sections element CSS.

Top separator

$el span.x-separator-top-angle-in {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
}

Bottom separator

$el span.x-separator-bottom-angle-in {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[JenniferS]

That added a straight line across the element at the top and bottom, but not along the angle itself. Is that possible?

[TwoLuckyDucks]

Just thinking outside the box here… you can do it with elements (sections, overlaying one another) to create the look of a “border”.
ie.

• have a 1st section (that will be the bottom layer) with the angled top section separator (in the border color you want. eg. grey ),

• I then added a row to the first section (100% width) with a 3px (or more) high column with the column having the same “border” color background as the 1st section separator…eg. grey. this avoids some little blank spots on the very sides after the steps below)

• have a 2nd section with the same angled top section separator but a different color (your foreground section separator color, eg. in my example red)

• Then you use the top margin on the 2nd section to drag it up and over the 1st section (but not all the way… 3px still visible)
  

  

… and I created this. The good thing about this is it’s responsive.

Not sure this can work for “one edge”… maybe overlap a white line on the one edge and rotate it using an element transform effects to match the angle?

Might be some reasons why this is not a good idea (I’m not sure?), but thought you might appreciate a different way of thinking about a solution.

Cheers
Simon
.

[tristup]

Hi Simon,

This can be a solution too, thanks for sharing it.

[JenniferS]

I’ll give this a try and report back. Thanks for the idea.

[prakash_s]

Hello @jlswilton,

Please let us know how it goes.

Thanks

[JenniferS]

This worked well. Had to play around with it a bit but it looks good and is responsive. Thanks, Simon, for the idea!

[marc_a]

Hey @jlswilton,

We’re glad that you’re able to figure it out!

@TwoLuckyDucks, we really appreciate your time and effort to help resolve the issue.

Cheers!