DEV Community

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

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.