DEV Community


Discussion on: A width-responsive perfect square in pure CSS

ariel_gr08 profile image

Hey can you help me do a responsive triangle instead? I've been trying for a while and can't get it to work

kylefilegriffin profile image
Kyle Griffin

I believe if you try and do it with Border and border radius, it might be possible.

tchaflich profile image
Thomas C. Haflich Author

I'm going to guess that you're going to need a bit of trigonometry if you're unlucky, 2D CSS transforms (specifically rotate), and the ::before & ::after pseudo-elements. My initial approach would be to construct the lines of out the borders of the before/after elements and rotate them into place.

(This is assuming we can't use SVG for some reason. It can handle pretty much any shape easily, but figuring out how to use SVG in the first place is a barrier to entry.)

What kind of triangle are you trying to make? This StackOverflow answer has some interesting magic, but it may or may not work for you depending on what you're trying to do.