如何在图像周围的 CSS 左边框中创建间隙？

Question

试图弄清楚如何通过 CSS 或 JavaScript/jQuery 在图像周围的 CSS 左边框中创建间隙。

我找到了几个答案，如何在顶部或底部边框上使用间隙来执行此操作，但无法弄清楚如何将其应用于左边框。

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/

编辑 如前所述，此方法不适用于背景图像。但仅限于纯色背景色匹配。