Diagonal Divider CSS Colour problems

Support
#1

Hi,

Sorry for all the posts, seems like the most i’ve posted here…

I’m trying to make my mockup come to life within X but seem to be failing. Here is my initial mockup of the first section of my homepage

As you can see i’m trying to replicate the diagonal line separating the sections. Using my own CSS knowledge i’ve used a class and this

/* SKEW LEFT */

.skewleft {

background-color: rgba(88, 145, 214, 0.05) !important;
}

.skewleft:after {
content: '';
height: 100px;
width: 100%;
position: absolute;
z-index: -1;
background-color: rgba(88, 145, 214, 0.05) !important;
-webkit-transform: skewY(-5deg);
-moz-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
-o-transform: skewY(-5deg);
transform: skewY(-5deg);
margin-top: 20px;

}

Which is letting me get the initial angle that I want, however the colours are different and I don’t know why. This is just a solid bg colour but for other pages I might need a gradient so I need the colours to flow across. The line also stops dead and doesn’t carry on with the skew.

#2

Hey Ryan,

You actually do not need to add any custom CSS to achieve this because this feature already comes native in Cornerstone as the Section Separator option:

Then the result should be something like this:

However, if you are not seeing this options, you are probably working on a Classic Section or your advaced mode option is not enabled.

If you are using a Classic Section, it would be best to create a new section and it should automatically have these options.

In case you are still not seeing them despite having new sections, Please click on the cog icon on the settings area then enable the Advanced Mode option.

Hope this helps.

#3

Hi Jade,

That’s great, however because I have needed to add padding within the next section, how do I make the transparent part the same colour as the next section

So it looks like this

I tried

$el {

z-index: 20 !important;
}

on the diagonal section to make it overlap but then i’ve got the problem with the colours again. I just want it to be able to flow into a white background

Thanks

Ryan

#4

Hi Ryan,

Try removing the top separator option in the What We Do section.

Instead, add a bottom separator to the About Us section then set the color of the bottom separator the same as the section’s background color.

Lastly, add a top padding to the What We Do section to add more space between the two sections.

By following the steps above, you should accomplish what you are trying to do.

Hope this helps.

#5

Hi Jade,

The separator is already a bottom separator on the About Us section

And I have already added padding to that section, the issue is where the two sections meet causing the colour to lighten as the background is white on the other section. The z-index CSS didn’t help either

#6

I’ve found the issue.

I was using an rgba background with a low opacity, I got that hex code of the light colour, made the opacity 1 and it’s sorted

#7

Hi Jade,

I’ve followed your same instructions for my following page but it hasn’t quite working.

I’m looking to get this effect

And I know i’m close but I can’t work out how to get the image to look like my mockup

Can you help at all?

#8

Hi Ryan,

Try removing the top separator in the “Website Design from £299” section and add a bottom separator Instead to the “Website Design” section

To overlap the bottom section, try giving the negative margin to the bottom section to have a similar effect.

Hope this helps.

#9

Hi Nabeel,

I tried that but that doesn’t work as it doesn’t have the diagonal as the image, nor does it cut off the image. I tried maybe some negative margins but still that didn’t work.

#10

Hi Ryan,

This will be best achieve using clip-path. Here’s a site to generate clip-path for custom polygon.

1.) Remove the top separator on the second section.
2.) Generate the clip-path from here: https://bennettfeely.com/clippy/
3.) Add the clip-path on first section. To do this, inspect the first section > Custom Tab > Element CSS. Add this:

$el{
clip-path: polygon(0% 99%, 0% 1%, 99% 1%, 100% 71%); /*Feel free to adjust this value*/
}

4.) Set z-index value for first and second section. First section z-index should be greater than second section.
5.) Add the negative margin on your second section.

Here a sample: https://screencast-o-matic.com/watch/cq6V1qu6FK

Note that there’s a downside for this approach. It is not supported by all browsers: https://caniuse.com/#feat=css-clip-path. Though, this is the way how to achieve it.

Hope this helps.

#11

Hi Lely,

Ah okay. I might look at changing the design if the compatibility isn’t supporting by all browsers yet. Is that the only way to achieve that effect then?

Thanks

Ryan

#12

Hi Ryan,

You might want to try using SVG as suggested here: https://jsfiddle.net/2wu0dwrL/ and here (https://stackoverflow.com/questions/21904672/internet-explorer-and-clip-path). But it might just complicate everything.

The clip-path method as suggested by my colleague @Lely is probably the best at this point. The browsers that don’t support it are Internet Explorer and Opera. If only a small percentage of the audience use it, then I think it’s an okay compromise. – just an opinion, by the way.

1 Like
#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.