Responsive Triangles

hi po in t . final si te . com

The HTML is basically not able to be touched unless I want to append Javascript elements.

I’m having trouble figuring out how I can get the middle triangle to correctly show. I’m using vw and flexbox to get equal height triangles and get this to take up the full width of hte page. The white space between triangles are rotated pseudo elements.

You can see the left/right triangle overlapping the middle one. Also the middle triangle isn’t fully extending through the tip which shows me that my math is somewhat off for these sections. Anyone able to advise?

Certainly a tricky one to do with css. I would probably want to make life easy and use some svg solution, but if you can’t change the html…
For the images overlapping, I think editing the images to have an alpha mask should cure that. In fact if you made them all triangular via alpha, it may cure the other problems too. The images are png, so it’s an option. Then it should just be a case of spacing them out correctly.

1 Like

The thing is that the images can be c hanged out at any time so unless I want to take that image and JS hack some sort of SVG in there, that’s not an option for me right now. The images are set via our CMS so any sort of SVG solution would require some JS. Ideally this will be done via CSS.[quote=“SamA74, post:2, topic:233361”]
In fact if you made them all triangular via alpha
[/quote]

Unfortunately, as noted above, the images need to be “standard images” since the client certainly will not edit the images to this standard.[quote=“SamA74, post:2, topic:233361”]
Then it should just be a case of spacing them out correctly.
[/quote]

Right, and I’m having trouble getting the spacing. I thought I had it right until I looked at the middle and saw the tip is not rendering. Something with the math is off.

I thought svg would be out of the question since you can’t edit the html.
But thought the png with alpha would do it, if only you were able to edit the images to apply the masks, as the filenames in the img src would be the same.
The thing is, I’m not sure how you will solve the overlapping image problem without any form of masking, as the triangles do overlap.
The only other thing I can think of is clip-path but I don’t think the browser support is up to it.

1 Like

If someone could help me get the math right for the triangles, I know I can get the image working.

I just fail to see how I can get the triangle to fully show right now. That’s my main issue right now.

I think I got it…if someone could check the math, let me know if it doesn’t add up correctly…I used an on-screen ruler and it appears to all measure up correctly.

Such a complicated design…awkward to code.

Hmm, now that the triangles are 0 width/height, I’m having issues seeing how I can possibly get a background image under the shades of blue like in my screenshot. What are my options here? They may be triangles visually but the element itself is still a square. How can I get this to look like my screenshot? I’m not sure how I can clip this.

DONE. SVG. FINALLY.

Time to go drink myself to death.

1 Like

I’ve read the posts and still confused about what you’re asking. However, this layout reminds me of CSS Shape that uses Triangle. Not sure if it will help in your case but maybe CSS Shape is the solution.

1 Like

I got it, but thank you for your input :slight_smile: . Much appreciated.

The questions seem odd now because the webpage no longer reflects what issues I was having. They are fixed.

1 Like

Brilliantly done, too

1 Like

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