Рама для картины средствами CSS (1 картинка, 5 слоев)

[KLS]

Задача - сделать возможным одевать картины в рамы. Некоторые ньюансы:

1. Картины могут быть разные по ширине и высоте.
   
2. Нужно обойтись 1 картинкой - каждая сторона рамы это одна и та же png-шка большой длинны, с прозрачным левым углом которую надо будеть ставить на фон в слои с разным z-index'ом и вращать на 90 градусов создавая таким образом все 4 стороны рамы картины. демка этой идеи:
   
3. )
   

Вожусь пол дня ... для статичных размеров еще вроди можно извратится, а вот для динамических ширины и высоты что-то ничего не получается...

Есть идеи/примеры как можно это реализовать?

[ShumNo]

Картинка в любом случае 1 - спрайт

полагаю весь вопрос в разметке и старые браузеры

[KLS]

Картинка в любом случае 1 - спрайт

полагаю весь вопрос в разметке и старые браузеры

Да проблема именно в разметке. Что касается кросбраузерности, то готовы даже пожертвовать ИЕ6 накрайняк)

[ShumNo]

Одна из задач ведь минимизировать эту разметку до минимума используя :after :before и тут как бы не пришлось пожертвовать и 7-м ослом

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

Edited November 29, 2011 by ShumNo