Как создать ромбовидный прямоугольник с помощью CSS?

Question

[kranopodem]

Подскажите как с помощью CSS создать вот такую фигуру. Заранее спасибо!

Comments

[Арман Дендибаев]

на чистом css?

[kranopodem]

Арман Дендибаев: Не обязательно

Answer 1

[Сергей Горячев]

Заставило задуматься.
https://jsfiddle.net/webirus/otfx1am0/

Comments

[Ivanq]

Гениально!

Answer 2

[dom1n1k]

Если задача не чисто спортивная, а из реальной жизни, то НЕ нужно делать это на CSS.
Нужна кар-тин-ка.

Comments

[Сергей Горячев]

С чего бы это?

[Kovalsky]

Почему? С помощью CSS ведь можно было бы сделать этот блок адаптивным.

[dom1n1k]

Потому что это будет костыльный, бажный, трудно модифицируемый (даже самим автором спустя месяц) код.
И ни один из приведенных вариантов не будет pixel-perfect по отношению к макету, всё это так, приближения.

[Elmechador]

Верстать вообще ничего не надо, надо картинку загружать и готово дело.

[dom1n1k]

Сделать кнопку одной цельной картинкой - это самое простое, конечно. Хотя это и не очень хорошо по понятным причинам. Хочется, чтобы кнопка всё-таки тянулась.

Если ограничиться адаптивностью только по ширине (этого достаточно в абсолютном большинстве случаев) - делается это вообще элементарно при помощи одной картинки-спрайта и двух псевдоэлементов before/after. При этом в псевдоэлементы кладется тот же самый спрайт.

Другой вариант - манипуляции со множественным фоном и его размерами. В этом случае можно даже сделать адаптивность по обоим измерениям (хотя я с трудом представляю себе, зачем это нужно кнопке).

Но ключевой момент в любом случае в том, что эта хитрая рамка должна быть нарисована и вставлена в виде картинки, а не извращенских трансформаций. Трансформации - это плохой, костыльный путь. Картинка модифицируется как угодно в режиме визивига в графредаторе. Другой наклон? Другая толщина линий? Скруглить углы? Сделать ассиметрию? Градиент? Всё не вопрос, всё рисуется за пару минут. А любители трансформаций сидят и кропотливо пересчитывают пиксели-градусы-косинусы и всё равно есть баги. Я вижу два бага в ответе, помеченном как решение (прочие вообще никуда не годятся).

Answer 3

[sergski]

Геометрические фигуры на css

Answer 4

[Олег]

Извращенный вариант https://jsfiddle.net/qxo3g8cy/

Comments

[Сергей Горячев]

Нормальный, только skew не хватило)

Answer 5

[Ivanq]

Немного извращенства: https://jsfiddle.net/Ivanq/8Lvpyjd1/