在四个角上将角图像添加到DIV边框的智能方法

Question

我的设计师在边角设计了一个菱形边框。见下图。

我实现这一目标的方法是将钻石形状保存为图像，创建1px实心边框，然后将钻石形状绝对放置在四个角上。虽然这有效但我确信有一种更聪明的方法可以做到这一点，而无需额外的标记。

也许使用类似的东西：在css之后？我该怎么做，还是有更好的方法？我需要与IE8 +兼容，但如果它能与IE7 +一起使用更好。

Answer 1

对于广泛兼容的解决方案，我认为你应该使用position: absolute combined with position: relative和负偏移的四个元素：

请参阅： http://jsfiddle.net/M4TC5/

@ meo使用transform的演示：http://jsfiddle.net/M4TC5/2/
（和我的演示：http://jsfiddle.net/M4TC5/1/）

这真的只是显示了这个概念，您可以使用此工具生成更好的transform代码（在IE中看起来并非略微“关闭”）：http://www.useragentman.com/IETransformsTranslator/

<强> 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
}