Хочу нарисовать объект в виде подобного нечта (x, y и z — картинки):
1)
+------------+
|xxxxxxxxxxxx|
|xxxxxxxxxxxx|
|xxxxxxxxxxxx|
|xxxxxxxxxxxx|
|xxxxxxxxxxxx|
+------------+
2)
+------------+
|xxxxxxxxxxxx|
|x+----------+
|x|yyyyyyyyyy|
|x|yyyyyyyyyy|
|x|yyyyyyyyyy|
+-+----------+
3)
+-----+------+
|zzzzz|xxxxxx|
|zzzzz+------+
|zzzzz|yyyyyy|
+-+---+yyyyyy|
|x|yyyyyyyyyy|
+-+----------+
Нужно, чтобы объект (например, кнопка оформляемая таким способом) был цельным элементом, т.е. события происходили по всему занимаемому изначально x пространству.
Нужно реализовать это только с помощью html/css, без использования дополнительных библиотек.
Вопросы:
1) можно ли реализовать подобное по этим шагам, т.е. накладывая картинки друг на друга?
2) можно ли частично отрисовывать картинки x и y, т.е. указывать, откуда и докуда рисовать нужно, чтобы не происходило масштабирования?
3) есть ли вообще какие-нибудь пути получения этого?
Использовать несколько background-image не нужно.
P.S. Надеюсь, из схемы понятно, чего я хочу.
