CSS 边框高度每边不同

Question

我想知道在纯 css 中是否可以使用这样的边框？此框中将没有内容，只有 future 的图像。

我想在没有 jQuery 的情况下使用纯 CSS 实现这一点。我环顾四周，似乎不太可能，但是随着 CSS 的不断发展，我想知道除了使用嵌套 div 等之外是否有可能。

干杯!

Answer 1

你可以伪造它。像这样 jsFiddle example .

HTML

<div id="wrapper">
    <div id="top"></div>
    <div id="bottom"></div>
    <img src="http://www.placekitten.com/200/100" />
</div>

CSS

#top, #bottom {
    width: 200px;
    height:50px;
    position:absolute;
    left:-1px;
}
#bottom {
    border-left: 1px solid #f00;
    border-right: 1px solid #f00;
    border-bottom: 1px solid #f00;
    bottom:0;
}
#top {
    border-left: 1px solid #f00;
    top:0;
}
#wrapper {
    position:relative;
    width: 200px;
    height:100px;
    background: #faa;
}