如何从显示中隐藏元素的内部部分？

Question

有很多技巧可以解决问题的简单性，这是我的要求：

1. 我希望 <hr /> 元素可见，并切掉一部分（例如；完全透明）
2. <hr /> 的宽度未知
3. 剪切区域具有固定尺寸，并且必须位于<hr /> 顶部的中心
4. 使用 1x <hr /> 元素
5. 在 IE11 和 Safari 11 以及现代浏览器中受支持

由于浏览器支持，我想我只能在 SVG 中使用 clipPath 并通过 <hr /> 元素上的 CSS 将其设置为剪辑区域。

以下演示尚未在 IE/Safari 中测试，它突出了我尝试首先绘制一个切掉一部分的 SVG 形状。除了我的要求 #2 和 #3 之外，这部分几乎没问题，因为我还没有一个流体填充路径，其中有一个固定且居中的第二个路径。

当我将 SVG 中的 path 转换为 clipPath 然后将其分配给 hr /> 元素时，要求 #1 目前完全失败。

Codepen 演示：https://codepen.io/davewallace/pen/WNNRMoR

标记：

<p>1. Aspect ratio in action, box is correctly centered, but I need the black region to stretch all the way to the far left and right edges, leaving the inner cut-out box in the middle.</p>
<div>
    <hr />
    <svg xmlns="http://wwww3org/2000/svg" height="32" width="100%" viewBox="0,0,10,10">
        <path d="M 0,0 h 10 v 10 h -10 z
                         M 2,2 v  6 h  6 v  -6 z" /> 
    </svg>
</div>

<p>2. So I tried removing the aspect ratio. That sort of helped, but I need the inner cut-out box to be a fixed width and centered.</p>
<div>
    <hr />
    <svg xmlns="http://wwww3org/2000/svg" height="32" width="100%" viewBox="0,0,10,10" preserveAspectRatio="none">
        <path d="M 0,0 h 10 v 10 h -10 z
                         M 2,2 v  6 h  6 v  -6 z" /> 
    </svg>
</div>

<p>3. Regardless of the stretching accuracy of the two techniques above, I expected the supplied paths, converted into a clipPath, to hide the centre part of the HR element, leaving only its left/right sides visible.</p>
<div>
    <hr class="clipped" />
    <svg xmlns="http://wwww3org/2000/svg" height="32" width="100%" viewBox="0,0,10,10">
        <defs>
            <clipPath id="square">
                <path d="M 0,0 h 10 v 10 h -10 z
                                 M 2,2 v  6 h  6 v  -6 z" /> 
            </clipPath>
        </defs>
    </svg>
</div>

CSS（主要是为了说明）：

div {
    position: relative;
    border: 1px solid red;
    margin: 50px;
    padding: 20px;
    background: #999;
}
hr {
    height: 5px;
    background: lime;

    &.clipped {
        clip-path: url(#square);        
    }
}
svg {
    position: absolute;
    left: 0;
    top: 20%;
    border: 1px dotted red;
}

研究至今：

• https://css-tricks.com/clipping-masking-css/
• https://css-tricks.com/cutting-inner-part-element-using-clip-path/
• How can I cut one shape inside another?

到目前为止的替代方法：

• 使用 flexbox 并有 1 个<hr />、一个间隙，然后是另一个元素，如<div />，完成后半部分的效果。所以它不是在<hr /> 中“挖一个洞”，而是在视觉上停止和启动它。在我的上下文中，这种方法需要一些神奇的数字并且不是那么干净。很确定它仍然可以访问，因为我仍在使用 1x <hr /> 元素，主要是因为它打算被使用。
• 到目前为止还没有别的，但这是为了实现“花哨的水平线”效果，人们可以将他们的图像/SVG 资源放到水平线的中间，而不必担心水平线会在资源下方。我也不知道页面背景颜色是什么，不能做任何假设。

谢谢！

Answer 1

我想您的hr 元素将具有纯色作为背景。考虑到这一点，您可以使用背景来着色以仅对需要的部分进行着色，使中间保持透明。

我将依赖calc()，它应该可以在 IE11 上运行，但我无法对其进行测试。

hr {
  height:10px;
  margin:10px 0;
  border:none;
  background:
    linear-gradient(blue,blue) left,
    linear-gradient(blue,blue) right;
  background-size:calc(50% - 10px) 100%; /* Cut 20px from the middle */
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<hr>

如果你想在你的元素上有一个洞，你也可以添加一些边框：

hr {
  height:20px;
  margin:10px 0;
  border-top:10px solid blue;
  border-bottom:10px solid blue;
  background:
    linear-gradient(blue,blue) left,
    linear-gradient(blue,blue) right;
  background-size:calc(50% - 10px) 100%; /* Cut 20px from the middle */
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<hr>

Answer 2

只需使用clip-path 和calc()。

我使用这个工具创建了一个相对路径，然后我手动添加了 calc()。 https://bennettfeely.com/clippy/

hr {
  clip-path: polygon(0% 0%, 0% 100%, calc(50% - 10px) 100%, calc(50% - 10px) calc(50% - 10px), calc(50% + 10px) calc(50% - 10px), calc(50% + 10px) calc(50% + 10px), calc(50% - 10px) calc(50% + 10px), calc(50% - 10px) 100%, 100% 100%, 100% 0%);
  height:40px;
  background: black;
}

body {
  background: url(http://placekitten.com/200/300);
  margin: 10px;
}

<hr>