我的设计师在边角设计了一个钻石形状的边框.见下图.
我将要实现这一点的方式是将钻石形状保存为图像,创建1px实心边框,然后将钻石形状绝对定位在四个角落.虽然这个工作,我确信有一个更聪明的方式来做这个没有额外的标记.
也许使用以下的东西:在css之后?我该怎么做,还是有更好的方法?我需要与IE8兼容,但如果它与IE7更好的工作.
解决方法@H_403_8@
@H_301_9@
对于广泛兼容的解决方案,我认为您应该使用四个元素与
position: absolute
combined with position: relative
和负偏移:
@ meo的演示使用transform:http://jsfiddle.net/M4TC5/2/
(和我的演示:http://jsfiddle.net/M4TC5/1/)
这真的只是显示了这个概念,您可以生成更好的转换代码(在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 }