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

Question

有很多技术可以涵盖问题的简单性，这是我的要求:

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

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

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

当我转换 path 时，要求 #1 当前完全失败在 SVG 内部变成 clipPath然后将其分配给 hr />元素。

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 Assets 放到水平线的中间，而不必担心水平线会在 Assets 下方。我也不知道页面背景颜色是什么，无法对此做出任何假设。

谢谢!

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>