How can I make this code display a 3d regular pyramid ?

Question

This is a code I made trying to make a 3d pyramid but I can not think of a way to convert those rectangles into equilateral triangles.
https://code.sololearn.com/WBHQc83YJyrp/?ref=app

Answer 1

https://code.sololearn.com/WJLRSsJL2ZyM/?ref=app

Answer 2

https://code.sololearn.com/WdDHKx0zZog8/?ref=app
This was another solution I found experimenting yesterday. It is a bit shorter but not very intutive

Answer 3

That's cool... because it could be less or more unintuitive for a lot ;)

However, once you have understood the trick, that's not very hard... even if html and css could become very verbose to describe complex combinations ;) (that's true for a lot of tricks to avoid js and use only pure Html/Css)

Answer 4

Yeah, your solution is a most known trick to draw triangle with html/css... (good idea anyway: I have thinking to it, but the other solution is more flexible).
What I should test one day, is to try to use svg and/or canvas instead more classicals elements ;P

Answer 5

That's a good challenge, and could work even if js is not available (user disabled it, plain text browser, and so on...)

Answer 6

Thank you very much. Your program was very easy to understand.

Answer 7

You are correct visph. Js is very useful but not using it is sometimes a better approach.
😀

Answer 8

That would surely be an interesting and challenging. 👍🏻👍🏻