Умный способ добавить угловое изображение на границу DIV на всех четырех углах

Мой дизайнер разработал границу с алмазной формой на граничных углах. См. Изображение ниже.

Diamond Border

То, как я собираюсь достичь этого, - сохранить форму алмаза в качестве изображения, создать сплошную границу 1px, а затем поместить алмазную форму абсолютно на четыре угла. Хотя это работает, я уверен, что есть намного более умный способ сделать это без дополнительной отметки.

Может быть, что-то вроде: after in css? Как я могу это сделать, или есть лучший способ? Мне нужно, чтобы это совместимо с IE8 +, но если оно работает с IE7 + еще лучше.

ОТВЕТЫ

Ответ 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
}