Как сделать кроссбраузерный ромб?

Question

[Лобстер]

Здравствуйте. Как видите на рисунке выше у меня есть ромбик и я не знаю как его сделать. То есть как... Я его сделал с помощью clip-path, но эта же штука не кроссбраузерная + как я понял у clip-path нет возможности сделать границу. С помощью обычного css я не понял как сделать ромб чтобы в него можно было поместить иконку(иконка с помощью :after добавляется пустому спану). Была мысль сделать с помощью SVG, но... я еще нуб в этом. Не ну фигугу я сделаю, а вот что дальше с ней делать О_о я понятия не имею. В общем мне нужна помощь. Поделитесь кто понимает в подобных делах.

Comments

[Ярослав Иванов]

открой для себя transform
https://www.w3schools.com/cssref/playit.asp?filena...

[ivan1kazantsev]

Ярослав Иванов: он, кажется, умеет делать ромб, но не умеет помещать в него что-то ;)

[Ярослав Иванов]

ivan1kazantsev: Тогда сделать 2-ой трансформ. Поместить в квадрат иконку, повернуть ее на 45 градусов зачем сам квадрат в противоположную сторону)

Answer 1

[Alexander Pushkarev]

А в чём проблема? codepen.io/anon/pen/VpBVod через after или before сделайте квадрат и поверните его на 45 градусов

Answer 2

[ivan1kazantsev]

Можно использовать позиционирование, например, так. В вашей задаче это будет немного по-другому, но смысл, думаю, донесу: https://jsfiddle.net/wqLdb03x/3/