CSS边框高度各不相同

Question

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

我想在纯CSS中实现这一点，没有jQuery。我环顾四周似乎不太可能，但是随着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;
}

Answer 2

如果使用伪元素，则只能使用一个div。 jsFiddle here

HTML：

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

CSS：

#wrapper {
    position:relative;
    width: 200px;
    height:100px;
    background: #faa;
    border-left: 1px solid #f00;
    border-bottom: 1px solid #f00;
}
#wrapper::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: -1px;
    right: -1px;
    border-right: 1px solid #f00;
    border-bottom: 1px solid #f00;
}

Answer 3

只是为了“思考”它，你也可以在div的右下角（作为背景图像）粘贴一个小图形，并在左侧和底部使用边框。仍然只是通过带有一个小图形的css操纵它，但至少高度和宽度将是动态的并且不会像使用完整图像那样卡住。

还可以避免大量的额外加价和css。 1个div，1个css声明和1个小图像。