Is it possible to have an angle on the side of a column so it looks a bit more interesting as a divider?!

[core365]

Hi, is it possible to have an angle on the side of a column so it looks a bit more interesting as a divider?!! I’ve just quickly mocked something up to show what I mean - I’d like to have an angle on the blue column:

I’ll put the URL in a secure note as it’s on a temp link.

Hope it’s possible, thanks!

[Prasant]

Hello @core365,

Thanks for asking.

X Theme comes with section level separator wherein you can have separators. Looking at the image it seems that you are looking for angled separator between columns. You will have to do some bit of custom CSS work to make the necessary changes. You can take a look at following thread for some pointers:

Angled lines on background CSS

Thanks.

[core365]

Hi, thanks, however I’m not sure how that works with what I’m trying to do! I’ve just gave it a go and it does the top and bottom horizontally skewed, I’m just after an extra angled bit adding onto the right side of the blue column!

Cheers!

[ruenel]

Hello @core365,

You will be using Skew() css function. Simply add a custom my-blue-column class in your column setting and use this custom css:

.my-blue-column {
    overflow: hidden;
}

.my-blue-column:before {
    content: "";
    display: block;
    background: rgb(0,93,161);
    width: 120%;
    height: 100%;
    position: absolute;
    right: 40px;
    top: 0;
    z-index: -1;

    transform: skewX(-10deg);
  }

Just make sure that you are not adding any background color to the column so that you can see that custom background color with slanting sides.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Regards.

[core365]

That’s excellent, thank you!

Thanks for your time and help!

Cheers!

[rad]

You’re most welcome!