How to make object reflection, without -webkit-box-reflect?

Question

css

I have my own website, for the time being it serves as a temporary page where you can find mine: Social networks and instant messengers, but I am a very strange person, so I try to make every little thing beautiful, the project itself was written overnight on my knees under the hood of vue. And I have a question how to make an object reflection without using the relatively new css property -webkit-box-reflect ( ICANUSE ), the problem is that older browsers may not support this property and until I make sure that this property will work on all modern browsers I don’t really want to use it correctly, I became very interested in how it was possible to make a reflection without this property.

here is my site flexice.ru (there is very loud music, I advise you to turn it down or turn off access to your stereo system for the site)


the reflection itself is used not only for this entire parallelepiped, but also for this line, it just seems at first glance that it is integral

Answer 1

Simple and cheap - duplicate elements and transform. A little more complicated and a little more adequate (probably) - using SVG, including using elements repeatedly by ID.