How to make a cross-browser rhombus?

Question

css

Hello. As you can see in the picture above, I have a rhombus and I don't know how to make it. That is, how ... I made it using clip-path , but the same thing is not cross-browser + as I understand it, clip-path does not have the ability to make a border. With the help of regular css, I did not understand how to make a rhombus so that an icon can be placed in it (the icon is added to an empty span using :after). There was an idea to do it using SVG, but ... I'm still a noob at this. Well, I’ll do it, but what to do with it O_o, I have no idea. Basically, I need help. Share who understands in such cases.

Answer 1

What's the problem? codepen.io/anon/pen/VpBVod after or before make a square and rotate it 45 degrees