イメージの周りのCSS左境界線にギャップを作成するにはどうすればよいですか？

Question

CSSでギャップを作成する方法を理解しようとすると、CSSまたはJavaScript/jQueryを使用して画像の周りに境界が残っていました。

これを行う方法は、上端または下端の隙間でこれを行う方法ですが、これを左端に適用する方法を理解できませんでした。

Here (https://ibb.co/cGS0vk)は私が達成しようとしているイメージです。ここで

は、これまでのところ、私のHTMLです：

<div class="frame"> 
    <img class="quote" src="quote.jpg"> 
    <h2>Heading<h2> 
    <p>Lorem ipsum<p> 
</div> 

そして、ここでは、CSSです：

.frame { 
    Border-top: 10px sloid grey; 
    Border-right: 10px sloid grey; 
    Border-bottom: 10px sloid grey; 
} 
.quotes { 
    position: relative; 
    right: 100px; 
} 

Answer 1

あなたが:beforeと:afterなどの擬似要素を使って、それを行うことができます。私は要件の最小限の量を使用してを考え出すことができる

.box { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100px; 
 
    height: 50px; 
 
    border: solid #000; 
 
    border-width: 5px 5px 5px 0; 
 
} 
 

 
.box:before, 
 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    background: #000; 
 
    height: 30%; 
 
    width: 5px; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.box:after { 
 
    top: auto; 
 
    bottom: 0; 
 
}

<div class="box"></div>

Answer 2

ベストアイデア：

既存のボーダーの上に背景色マッチング要素を配置するために::before/::after pseudo elementsを使用してください。これは基本的にあなたの国境の一部を "スライス"します。

HTML：

<div class="wrap"> 
    <div class="box"></div> 
</div> 

CSS：

.wrap { position: relative; width: 300px; height: 300px; background-color: #fff; } 
.box { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 200px; border: 10px solid #8af; } 
.box::before { content: ''; position: absolute; width: 10px; height: 100px; margin: auto; left: -10px; top: 0; bottom: 0; background-color: #fff; } 

JSFiddle：https://jsfiddle.net/gam9s0mz/

編集述べたように、この方法は、背景画像とうまく動作しません。しかし、唯一の固体の背景色の一致で。