html - 顶部和底部带有部分边框的按钮

Question

大家好，我想插入一个 <button>在我的代码中，border-top 有一个缺口和 border-bottom .我看过一些examples可以用它移除零件的地方，但这并不是我想要的。您是否知道如何获得类似上述图片的内容？

预先感谢您的回复!

编辑:

我添加更多信息:最好的是按钮的背景是透明的，border-size是可定制的。

Answer 1

使用伪元素

.brd {  
  font-size: 30px;
  padding: 4px 20px;
  position: relative;
  border: none;
  background-color: white;
}
.brd:before,
.brd:after {
  content: ' ';
  position: absolute;
  border: 1px solid black;
  top: 0;
  bottom: 0;
  width: 10px;
}
.brd:before {
  border-right: 0;
  left: 0;
}
.brd:after {
  border-left: 0;
  right: 0;
}

<span class="brd">Title</span>

<button class="brd">Title</button>