智能的方式添加角图像到所有四个角落的DIV边框 [英] Smart way to add corner image to DIV border on all four corners

问题描述

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

My designer has designed a border with a diamond shape on the border corners. See image below.

我要实现这一点的方式是将钻石形状保存为图像，创建一个1px的实体边框，然后将菱形形状绝对定位在四个角。虽然这个工作我相信有一个更聪明的方式来做这个没有额外的标记。

The way I'd go about achieving this would be to save the diamond shape as an image, create a 1px solid border and then place the diamond shape absolutely positioned on the four corners. While this works I'm sure there is a much smarter way to do this without the additional mark up.

也许使用类似：after css？我该怎么做，还是有更好的方法？

Maybe using something like :after in css? How would I do this, or is there a better way? I need to have this compatible with IE8+ but if it works with IE7+ even better.

推荐答案

对于兼容性非常好的解决方案，我需要使用兼容IE8 +认为您应该使用 位置：绝对结合 position：relative 和负偏移量：

For a solution that's widely compatible, I think you should use four elements with position: absolute combined with position: relative and negative offsets:

strong> http://jsfiddle.net/M4TC5/

@ meo's演示使用 transform ： http://jsfiddle.net/M4TC5/2/

（和我的演示： http://jsfiddle.net/M4TC5/1/ ）

@meo's demo using transform: http://jsfiddle.net/M4TC5/2/
(and my demo: http://jsfiddle.net/M4TC5/1/)

这真的只是显示了这个概念，你可以生成更好的 transform 代码in IE）with this tool： http://www.useragentman.com/IETransformsTranslator/

That really just shows the concept, you can generate better transform code (that doesn't look slightly "off" in IE) with this tool: 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
}

这篇关于智能的方式添加角图像到所有四个角落的DIV边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！