Is there an easier way to perfectly align 2 shapes made with CSS?

Honestly not 100% sure how to word this question properly so ill just be as blunt as I can. Im working on the Product Landing Page FCC project and on both, line 82-127 of my CSS styles/lines 26-30 of my html (the first graphic I try to create with css shapes) and lines 156-188 of my CSS styles/lines 37-37 of my html (my second graphic im trying to create with css shapes), im having a hard time perfectly aligning both of them.

I have been painstakingly trying to align the triangles flush with the rectangles to make it appear as one shape. They are close to looking flush, like one shape and iv even gone into the decimal points to try and align them properly, but if you really look closely they are not completely flush, the angle might be very very slightly off (I think) and there is a very small but noticeable overlap of the triangle and rectangle. I can’t help but think after some of the much more complex creations iv seen people make with solely css like a a penguin made with many different css shapes, that I have to be unaware of a better, easier way to create and/or position shapes made with css.

copepen link:

You can’t really give the elements absolute position values, what happens when the screen size is smaller or bigger?

You can use clip-path to make the shape, here is a tool to help out. You still need to figure out how the shape should react to different screen sizes.

Quick example (fixed size)

1 Like

Effects you’re trying to achieve normally are done with ::before and ::after, so triangles are basically part of the rectangles forming one shape. Doing it in your way considered to be black magic.

Clip path also an option, but your div boxes should be fixed size or grow/shrink keeping same ratio (by applying scale() for example - which might be quite challenging for responsive design

Thanks for the help, by “You can’t really give the elements absolute position values” do you mean that I shouldn’t be using px but I should be using a percentage number? Or neither and something else completely? Also is there any situation at all I should be using a fixed value for anything?

I mean you have positioned the shape elements absolutely relative to the page. If you give the elements a container and set position relative on it, the elements inside will be placed relative to that container. Then you can use the offsets and have them be “locked” to the container box. If that makes any sense.

Here is another example, using a pseudo element like suggested for the triangle cutout and using border for the shape like you are in your Codepen.