css - 両側で異なる CSS ボーダーの高さ

Question

このような境界線が純粋な css で可能かどうか疑問に思っていますか? このボックスにはコンテンツはなく、将来の画像のみです。

jQueryを使用せずに、純粋なCSSでこれを実現したいと思います。私は周りを見回しましたが、実際には不可能のようですが、CSS が常に進化しているため、ネストされた div などを使用する以外に可能かどうか疑問に思っていました.

乾杯！

Answer 1

擬似要素を使用する場合、1 つの div のみで実行できます。ここでjsFiddle

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 2

念のため、div の右下に (背景画像として) 小さなグラフィックを貼り付け、左と下に境界線を使用することもできます。まだ1つの小さなグラフィックでcssを介して操作するだけですが、少なくとも高さと幅は動的であり、完全な画像を使用しているかのように動かなくなります.

また、大量の余分なマークアップと CSS を回避します。1 つの div、1 つの CSS 宣言、および 1 つの小さな画像。