Question

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

我希望一个<hr />元素可见，其中一部分被切掉（例如，完全透明）
<hr />的宽度未知
切口区域的尺寸固定，并且必须位于<hr />
使用1个<hr />元素
在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;
}

到目前为止的研究：

到目前为止的替代方法：

使用flexbox并留出1个<hr />，一个间距，然后再加上一个<div />等元素来结束效果的后半部分。因此，它不是<hr />中的“开孔”，而是视觉上停止和启动它。在我的上下文中，这种方法将需要一些魔术数字，而且不是很干净。可以肯定的是它仍然可以访问，因为我仍然主要使用1x <hr />元素。
到目前为止，什么都没有，但这是为了实现“花哨的水平尺”效果，使人们可以将其图像/ SVG资产放到水平尺的中间，而不必担心该资产下方的水平线。我也不知道页面背景颜色是什么，对此无法做任何假设。

谢谢！

Answer 1

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

我将依靠应该在IE11上运行的calc()，但无法对其进行测试。

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>

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

2 个答案: