Ответ 1
Для решения, которое широко совместимо, я думаю, вы должны использовать четыре элемента с position: absolute
в сочетании с position: relative
и отрицательными смещениями:
Смотрите: http://jsfiddle.net/M4TC5/
@meo demo с помощью transform
: http://jsfiddle.net/M4TC5/2/
(и моя демонстрация: http://jsfiddle.net/M4TC5/1/)
Это действительно показывает концепцию, вы можете генерировать более лучший transform
код (который не выглядит немного "выключен" в IE) с помощью этого инструмента: <а4 >
HTML
<div class="image">
<span class="corner TL"></span>
<span class="corner TR"></span>
<span class="corner BL"></span>
<span class="corner BR"></span>
<img src="???" />
</div>
CSS
.image {
position: relative
}
.corner {
position: absolute;
background: url(???);
}
.TL {
top: -10px;
left: -10px
}
.TR {
top: -10px;
right: -10px
}
.BL {
bottom: -10px;
left: -10px
}
.BR {
bottom: -10px;
right: -10px
}