隐藏部分div边框[重复]

Question

我正在尝试使用 css 隐藏 div 边框的某些部分，更具体地说是 ngb 手风琴 panrl 的边框， 我有左侧和底部的边框我想从左边框的开始和结束隐藏 5%，从下边框的开始和结束隐藏 10%。

下面是图片，以进一步说明我想要实现的目标 我想隐藏红色框标记的区域。

非常感谢任何有关 css 的帮助。

Answer 1

你需要使用 ::before 和 ::after 伪元素

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.yourdiv {
  width: 100px;
  height: 60px;
  background-color: yellow;
  position: relative;
}

.yourdiv::before {
  content: '';
  width: 2px;
  height: calc(100% - 20px);
  background-color: #000;
  display: block;
  left: 0;
  position: absolute;
}

.yourdiv::after {
  content: '';
  width: calc(100% - 20px);
  height: 2px;
  background-color: #000;
  display: block;
  bottom: 0;
  position: absolute;
}

<div class="yourdiv">Your div</div>