Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shape Divider between two images or gradients. #3829

Closed
jcmatoskx opened this issue Mar 21, 2018 · 54 comments
Closed

Shape Divider between two images or gradients. #3829

jcmatoskx opened this issue Mar 21, 2018 · 54 comments

Comments

@jcmatoskx
Copy link

@jcmatoskx jcmatoskx commented Mar 21, 2018

It would be great if we could create a shape divider between two backgrounds with images or gradients.
It seems shape dividers are only possible if one of the sections is a solid color, but it would be nice if we could select to continue the gradient from the other section, or the image.

@bainternet

This comment has been minimized.

Copy link
Collaborator

@bainternet bainternet commented Mar 25, 2018

@jcmatoskx

Can you provide an example to what you mean?

@jcmatoskx

This comment has been minimized.

Copy link
Author

@jcmatoskx jcmatoskx commented Mar 25, 2018

I have an image from my website, it's not a great example because the gradient is very subtle and the image is a dark texture, but essentially the issue is that if the two sections are either a gradient or image, there is no way to blend their transition with a shape divider between them as the shape divider input is always a solid color. Or is there something I didn't understand?
shapedividwe

@TomRaraAvis

This comment has been minimized.

Copy link

@TomRaraAvis TomRaraAvis commented Mar 27, 2018

The shape divider being a solid color is also a problem for me. I want to push the image in the second section to show in the shape divider above, and it isn't possible because the shape divider is solid. The shape divider looks silly when images are juxtaposed. Wish it could be transparent & somehow punch a shape hole through the section on which it is applied & then I could negative margin-top the section below.

capture

@jcmatoskx

This comment has been minimized.

Copy link
Author

@jcmatoskx jcmatoskx commented Mar 27, 2018

Yup that is exactly the issue I am talking about

@bainternet

This comment has been minimized.

Copy link
Collaborator

@bainternet bainternet commented Apr 4, 2018

thanks for the clarification,

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

Thanks for the feedback.

@bainternet bainternet closed this Apr 4, 2018
@cobbman

This comment has been minimized.

Copy link

@cobbman cobbman commented Jul 17, 2018

+1 for this feature!

@stijnvanouplines

This comment has been minimized.

Copy link

@stijnvanouplines stijnvanouplines commented Aug 12, 2018

+1

@yeshansachithak

This comment has been minimized.

Copy link

@yeshansachithak yeshansachithak commented Aug 26, 2018

+1
Having the same issue.

@black-eye

This comment has been minimized.

Copy link

@black-eye black-eye commented Aug 26, 2018

+1

2 similar comments
@toniodz

This comment has been minimized.

Copy link

@toniodz toniodz commented Sep 6, 2018

+1

@nicolasteetz

This comment has been minimized.

Copy link

@nicolasteetz nicolasteetz commented Dec 17, 2018

+1

@theol0403

This comment has been minimized.

Copy link

@theol0403 theol0403 commented Dec 18, 2018

+1
image

@netbloger

This comment has been minimized.

Copy link

@netbloger netbloger commented Jan 31, 2019

+1 for this feature also!!

@clondon

This comment has been minimized.

Copy link

@clondon clondon commented Feb 3, 2019

+1

1 similar comment
@nboaldin

This comment has been minimized.

Copy link

@nboaldin nboaldin commented Feb 7, 2019

+1

@robertopib

This comment has been minimized.

Copy link

@robertopib robertopib commented Feb 7, 2019

+1 Here, I ended up leaving a solid color in between, but it would be nice to have the two images blend.
screen shot 2019-02-07 at 7 35 18 pm

@clondon

This comment has been minimized.

Copy link

@clondon clondon commented Feb 7, 2019

Hi,
I have been using a workaround that might help.
You set a higher z-index on the following section and then using a negative margin to move the section up until the white area is covered.
screenshot 2019-02-07 21 48 17
have used this on my website and the effect is quite nice.
I hope this helps.

@robertopib

This comment has been minimized.

Copy link

@robertopib robertopib commented Feb 8, 2019

Thanks @clondon The problem is when you have tow sections with image background. Your workaround works when you have a section with a BG image and then a solid color, actually you don't even need to set any z-index, just change the color of the shape divider to match the color of following section.

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

Saw this done on a homepage looking to pull this off anyone have an idea.
https://dartingbasketball.com/

Thanks

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

Thanks @clondon The problem is when you have tow sections with image background. Your workaround works when you have a section with a BG image and then a solid color, actually you don't even need to set any z-index, just change the color of the shape divider to match the color of following section.

Correct!

@robertopib

This comment has been minimized.

Copy link

@robertopib robertopib commented Feb 8, 2019

Saw this done on a homepage looking to pull this off anyone have an idea.
https://dartingbasketball.com/

Thanks

That's exactly what we need to accomplish! Nice example!

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

Working on it now i'll see if I can get it. Been at for 4 hours already.

@robertopib

This comment has been minimized.

Copy link

@robertopib robertopib commented Feb 8, 2019

Me too, did you try the clip-path: polygon?

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

I'm okay with code not that great self taught.

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

trying it now

@robertopib

This comment has been minimized.

Copy link

@robertopib robertopib commented Feb 8, 2019

I think I have it figured out, I inspected the example you post, and I think I have it, just a minute and I'll let you know what I did.

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

okay cool. i tried pulling everything apart and adding that snippet of code to the css but to no avail.

@robertopib

This comment has been minimized.

Copy link

@robertopib robertopib commented Feb 8, 2019

So I basically created 3 classes top-tilt, bottom-tilt, top-bottom-tilt and added the css as following

.top-tilt{
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}

.bottom-tilt{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

.top-bottom-tilt{
	clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}

and assigned them to my elementor widgets depending on what I need and adjusting top and bottom margins for the sections to overlap.
You can adjust the polygon values based on these https://www.sitepoint.com/introducing-css-clip-path-property/

@robertopib

This comment has been minimized.

Copy link

@robertopib robertopib commented Feb 8, 2019

A problem with this workaround is that if you need to select a section with the top-tilt class, you would need to use the elementor navigator, because the clip-path will hide the selector.

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

Did you add the snippet to the css. or do I need to add it as a class

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

can you post a screenshot

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

got it nevermind

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

Impressive

@robertopib

This comment has been minimized.

Copy link

@robertopib robertopib commented Feb 8, 2019

I think I will just go with the

.top-tilt{
    clip-path: polygon(0 0, 100% 45px, 100% 100%, 0 100%);
}

And I replaced the 10% with 45px. I have a lot of tilted sections, and the percentages will give me different angles depending on the section height.

@Aroundme12

This comment has been minimized.

Copy link

@Aroundme12 Aroundme12 commented Feb 8, 2019

I'm going to roll with the bottom tilt. I'll try and play around with this for a bit.

@newflavour

This comment has been minimized.

Copy link

@newflavour newflavour commented Feb 20, 2019

+1 for this feature

@newflavour

This comment has been minimized.

Copy link

@newflavour newflavour commented Feb 20, 2019

as a workaround, for now, I've been finding a colour that closely matches the image.
the upper section has the shape divider in that colour
the lower section has a background gradient overlay to help blend it together

it would be amazing if there was an option for 'clip path'

elementor-workaround

@ccBaileyRob

This comment has been minimized.

Copy link

@ccBaileyRob ccBaileyRob commented Mar 14, 2019

Would also really love this feature. Seems like an oversight seeing as a lot of the other 'style' elements can feature a gradient...

@mfainshtein4

This comment has been minimized.

Copy link

@mfainshtein4 mfainshtein4 commented Apr 1, 2019

If you are trying to achieve this using clip-path as @robertopib suggested. Id recommend checking out: https://bennettfeely.com/clippy/

@Waleedviews

This comment has been minimized.

Copy link

@Waleedviews Waleedviews commented May 12, 2019

+1

2 similar comments
@ArekZw

This comment has been minimized.

Copy link

@ArekZw ArekZw commented May 23, 2019

+1

@emailjough

This comment has been minimized.

Copy link

@emailjough emailjough commented Jun 15, 2019

+1

@tracyleigh54

This comment has been minimized.

Copy link

@tracyleigh54 tracyleigh54 commented Jun 22, 2019

+1 for this!!

@m0lt

This comment has been minimized.

Copy link

@m0lt m0lt commented Jul 3, 2019

+1

1 similar comment
@FrankLauda

This comment has been minimized.

Copy link

@FrankLauda FrankLauda commented Jul 21, 2019

+1

@FrankLauda

This comment has been minimized.

Copy link

@FrankLauda FrankLauda commented Jul 21, 2019

I worked this out with a simple bit of CSS code elaborating on @robertopib and @mfainshtein4 comments. So yes you just need to add clipping path code. In my case, I wanted to create a triangle at the bottom of my top main image.

To create the clipping shape I wanted I went to
https://bennettfeely.com/clippy/
and selected the hexagon shape. This is the bit of code:

clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 89%, 0 0);

Now I apply this the main section with my background image in Advanced > Custom CSS. Then apply the code to the ID of the section. You can find the ID using your browser developer tool. So now mine was

.elementor-element-cd60891 {
clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 89%, 0 0);
}

Because the main image is underneath the second section (with background image), you just need to add a z-index to bring the top section to the front. So complete code:

.elementor-element-cd60891 {
z-index: 1;
clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 89%, 0 0);
}

Lastly, you need to set a minus top margin to the section below so there is no gap.

You could also apply the clipping path in reverse for the second section, then you won't need to add z-index.

@bentalgad

This comment has been minimized.

Copy link

@bentalgad bentalgad commented Aug 24, 2019

+1 so basic. it's just amazing they don't do those stuff.

@DaninDC

This comment has been minimized.

Copy link

@DaninDC DaninDC commented Sep 24, 2019

+1 It would make life so much easier if the default of the shape is transparent. Come on Elementor!

@vind

This comment has been minimized.

Copy link

@vind vind commented Oct 11, 2019

+1 Why has this even been neglected for so long!

@FrankLauda

This comment has been minimized.

Copy link

@FrankLauda FrankLauda commented Oct 11, 2019

@neylwalecki

This comment has been minimized.

Copy link

@neylwalecki neylwalecki commented Oct 31, 2019

+1

1 similar comment
@JCD666

This comment has been minimized.

Copy link

@JCD666 JCD666 commented Jan 18, 2020

+1

@abescom

This comment has been minimized.

Copy link

@abescom abescom commented Jan 20, 2020

Same issue ! +1 ;-)
screenshot-5mm3gj3b-abesfr pf6 wpserveur net-2020 01 20-16_38_53

@ethandmiller

This comment has been minimized.

Copy link

@ethandmiller ethandmiller commented Feb 16, 2020

It would be great if we could create a shape divider between two backgrounds with images or gradients.
It seems shape dividers are only possible if one of the sections is a solid color, but it would be nice if we could select to continue the gradient from the other section, or the image.

thanks for the clarification,

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

Thanks for the feedback.

+1 for this feature

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.