Возможно ли сверстать только css'ом?

Question

[Антон Попов]

Есть вот такое изображение:


С центром проблем нет, а вот с краями (обведен красным) — думаю: есть ли элегантное решение сделать это css'ом или проще сделать картинкой?..

Comments

[Антон Попов]

Немного неудачно вырезал картинку: на таком фоне практически не виден ещё один бордюр.

Вот что получилось: dabblet.com/gist/4727755

Правда есть парочка артефактов, но поверх них будут пункты меню, так что не страшно…

Answer 1

[neosys]

Смотря какие браузеры нужно поддерживать. Лучше сделайте картинкой, немного дольше, зато будет везде работать.

Comments

[Антон Попов]

Браузеры — из последних. Просто этот элемент планируется использовать в разных местах (и разных модификациях) и картинкой делать не хотелось бы…

Answer 2

[LegoMushroom]

проще конечно картинкой, с CSS будет минимум 2 элемента

Comments

[Антон Попов]

ну для пары есть ::before и ::after ))

[LegoMushroom]

я их учел)

Answer 3

[vault]

картинка эта будет весить чуть больше двух килобайт. Средствами каскадных таблиц это можно делать исключительно с академическим интересом.

Comments

[Антон Попов]

В связи с наступающей «ретинизацией», да и не очень удобном процессе формирования картинок, не очень хочется использовать изображения для элементов интерфейса. Поэтому вопрос ещё и с практическим интересом))

Answer 4

[Upward]

На быструю руку сделал прототип, нужно только добавить префиксы в css для всех браузеров и подогнать под свой макет

jsfiddle.net/Upward/tunrg/

Comments

[Антон Попов]

отлично! думаю, можно остановиться на этом варианте, спасибо!

Answer 5

[Dron Krzh]

cssdeck.com/labs/full/m0aecfij

Comments

[Abcd_Efgh]

На всякий случай укажу, что примерно у 13 % российских пользователей Интернета ваш пример выглядит как смайлик коровы с широким носом.

[Dron Krzh]

Ну извините, я наверно не правильно понял заголовок вопроса.

А если серйозно, то IE6 не сразу умер.

[Антон Попов]

Да, для верхнего скругления без дополнительного элемента похоже не обойтись… Спасибо за вариант, буду думать.

А насчёт оперы < 12.1 и старых ие, то их меньше 5% — для них, возможно, надо бы сделать картинки… или не надо)))

[Антон Попов]

IE8 забыл посчитать: ещё 5% )) он то же не поддерживает трансформов. Ну и svg… Шансы генерить картинки возрастают)

[coldman]

Если в IE8 и меньше , будет просто прямоугольник , никто из пользователей IE8 не бросится с окна, если оно будет работать, они не узнают что там должны быть края в разную сторону, реальный пользователь не открывает сайт в разных бровзерах.

Answer 6

[Stdit]

Конечно же картинкой. CSS-ом вообще лучше не делать сложные элементы, потому что картинки практичнее. Они более совместимые, быстрее рендерятся, понятнее верстаются и переверстываются, и к тому же во многих случаях картинки в подходящем формате (например png8 с альфой) занимают меньше места, чем горы стилей с префиксами браузеров.

Answer 7

[wearymax]

Если без вмешательства в разметку — нет
:before и :after позволит вставить только по одному content:«элементу», а у вас на картинке есть как минимум два скругления на каждую сторону.

Лучше использовать одну png-картинку (например data:image/png;base64) и развернуть её трансформом по горизонтали ;)

Comments

[Антон Попов]

Может, тогда лучше svg? А то при правке цвета нужно будет опять генерить картинки…