Css 将角点图像添加到所有四个角点上的DIV边框的智能方法

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

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

---

也许在css中使用类似于：after的东西？我该怎么做，还是有更好的方法？我需要让它与IE8+兼容，但如果它与IE7+兼容得更好。

对于广泛兼容的解决方案，我认为您应该使用四个元素和负偏移：

请参见：

@meo使用

转换的演示

：
（还有我的演示：）

这正好说明了这个概念，您可以使用此工具生成更好的

transform

代码（在IE中看起来不会有点“偏离”）：

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>

---

我只会使用你目前的解决方案。CSS3会提供一些东西来让这个“更好”，但是并不是所有的浏览器（完全）都支持它。是的，你计划在你的网站上的每张照片都有相同的大小（或者一个大小是横向的，一个大小是纵向的）吗？div中的图像只是一个例子。它可能不是图像，也可能是文本，它可能会根据里面的内容展开：after和：before如果您只需要两个角或者使用固定的宽度，则可以使用。据我所知，IE7+支持：before和：after伪代码classes@alex-它将是一个固定的宽度。高度不是固定的。你有解决办法吗？我没有注意到你在问题中提到了这个想法。哦，好吧。如果你需要IE7支持，我会这么做。否则，我可能会选择一个基于

：after

的解决方案。有没有其他方法不需要那么多的标记就可以得到IE7？如果没有，请说，我会接受没有更好的方法。@sandeep-我的标记与thirtydot的答案几乎相同。我不会使用BG图像，您可以将它们设置为灰色边框，然后旋转它们。是的，它在IE中工作；）skew方法看起来不太好，所以要坚持使用额外的标记和图像。是，图像将成为精灵的一部分：）

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