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的右下角貼小圖形（如一個背景圖像）並在左側和底部使用邊框。仍然只是通過一個小圖形通過CSS來操作它，但至少高度和寬度將是動態的，不會像使用完整圖像一樣卡住。

也可以避免大量額外的標記和CSS。 1個div，1個css聲明和1個小圖片。

Answer 3

如果您使用僞元素，則只能使用一個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; 
}