css - 如何使 border-left 高于 border-bottom？

Question

我有一个 Bootstrap 列表组，如下所示:

这是我的 CSS:

$border: 1px solid rgba(0, 0, 0, 0.125);

.customer-orders-filters {
  .list-group {
    box-shadow: $card-box-shadow;
    color: $text-color;
    font-weight: bold;

    .list-group-item {
      border-left: none;
      border-right: none;
      border-bottom: $border;

      &:first-child {
        border-top: none;
      }
      &:last-child {
        border-bottom: none;
      }
      &.active {
        border-left: 5px solid $blue;
      }
    }
  }
}

如您所见，border-left 底部不是很正确。 我试图删除第一个 child 的 border-bottom，然后将 border-top 添加到 nth-child(2) 但是这不起作用，border-top 不存在。我还尝试将 border-style: outset 设置为 first-child 的 border-bottom 但没有效果。

我希望 border-left 完全位于 border-bottom 上方或下方，但不是一半...

你知道我该如何解决吗？我应该使用伪元素吗？

Answer 1

考虑使用如下的背景和边框:

.box {
  width:200px;
  height:50px;
  padding-left:5px;
  border-bottom:2px solid red;
  background:linear-gradient(blue,blue) left/5px 100% no-repeat;
}

<div class="box"></div>

或者相反:

.box {
  width:200px;
  height:50px;
  padding-bottom:2px;
  border-left:5px solid blue;
  background:linear-gradient(red,red) bottom/100% 2px no-repeat;
}

<div class="box"></div>

---

你也可以使用 box-shadow:

.box {
  width:200px;
  height:50px;
  padding-left:5px;
  border-bottom:2px solid red;
  box-shadow:5px 0 0 blue inset;
}

<div class="box"></div>