How to replicate shapes using clip-path or other things
Hello, I want to replicate the "trapeziums", the purple and black one and I don't really know how to proceed, I do have an idea, like I know to have custom shapes, we use clip-path something like that? Would really appreciate if someone can elaborate on that and give ideas on how I can try to replicate the "trapeziums"
15 Replies
CSS Clip-Path Generator - CSS Portal
This online generator helps with creating shapes for images using the css clip-path property.
oh thanks, will have a look at
we even have an animation generator, didn't know that, is it useful ? Like can we do complex things with that?
it really depends on the generator if you can do complex things with it
but it can definitely be useful if you don't feel like writing them by hand
yep I see, thanks !
Small question, this is what I have achieved using clip-path. When I try to resize my viewport width, like shrinking things, what happen is at a certain point their is some "gap" appearing in the middle, like separating shape1 and shape2, see the second diagram. Is there any reason to that?
https://codepen.io/Fakeur/pen/YPXqjBg
Looks like anti-aliasing artifacts. I wouldn't stack two boxes next to each other but rather on top of each other. Have a black background div and then stack another div with the same width and height on top. That one then has the clip path to cut out the shape you need and the purple background color
You can stack them with grid or
position: absolute , whatever you prefer
You can then use percentage values on the clip path if you want the shape to scale with the width of the rectangle. Or you use fixed values like rem to have it always at the same width, anchored to the left
That'll also make it easier to add the angled border. Just stack another div between the two and make the clip path extend to the right a bit
Aha i just saw that you have the black stuff on top and purple on the bottom. I'd invert that. Black backdrop with purple overlay
Putting two same colored boxes next to each other like that sometimes has bleedthrough like thatThe main problem is that the black section is comprised of two shapes next to each other. It is entirely possible to make them one shape.
I didn't use exact numbers to replicate what you had. This just shows the principle.
Whilst I realize that you want to to this with clip-path, you could also create the same effect using a linear-gradient background.
https://codepen.io/cbolson/pen/WbvGEOx
I will have a look, thanks !
yeah the one you create seems to work, hmm what was wrong with mine? Like me i had a main wrapper and 2 div inside but I think you only have a main wrapper and a single shape. The middle vertical line is a normal thing whenever we have 2 different divs with different background color next to each other ? Why the line don't appear in the one you draw pls
The line you get is the gap between your two shapes. I have one shape, so there can't be a gap.
yep I see, thanks ! So, it's normal then in any design? if we have 2 shapes with 2 different background we are expected to have a line like that ?
Yes. It happens at some levels of magnification. It's better to not put two shapes next to each other if they should actually be one.
yep I see, thanks !