css - 从覆盖文本的背面移除边框

Question

努力实现:

我正在尝试将标题拉到边框顶部并使覆盖部分的边框消失。

我将边框应用到一个 div，然后在顶部使用负边距，我将标题拉到边框的顶部。我正在实现的是下面的附图。但是如何切割覆盖部分的边框。

早些时候我有一个类似的案例，但那次我有平面白色背景，所以我确实将 background: white 应用于标题，边框看起来就像我做了一个切口。但在这种情况下有一个背景图像。

所以，如果有人用 CSS 解决了这种情况，那对我来说会是一个很大的帮助。

谢谢。

当前状态:

Answer 1

为您的标题使用背景，并使用 margin-top 或 top css 属性拖动它以将标题移动到特定位置:

HTML:

<br>
<div>
    <h1>Pro Care kraamzorg ook bij jou in de buurt?</h1>
  <p>Vul hieronder je postcode in en doe de postcode check!</p>
  <button>
  postcode
  </button>
</div>

CSS:

div{
    height:100px;
    width:500px;
    border:2px solid black;
}

h1{
    width:300px;
    margin-top:-10px;
    margin-left:5px;
    background:white;
}

https://jsfiddle.net/Lzxp0syf/