如何将边框放置在父级边界之外

Question

我陷入了一个设计挑战，我必须实现以下图像描述的 UI。

这是关闭的手风琴状态：

以下是打开手风琴状态。您可以看到红色圆圈区域，其中边框高度保持初始状态。

以下是我使用过的上述 UI 排列的伪代码。

<div class="card-wrapper" style="display:flex; flex-direction:column; border:1px solid #000; border-radius: 5px;">
    <div class="card-body" style="border-left: 10px solid #F00; border-top-left-radius: 10px; border-bottom-left-radius: 10px;">
        ...
    </div>
    <div class="card-accordion-body">
        ...
    </div>
</div>

我的输出如下所示：

Answer 1

使用绝对定位的伪元素

div {
  max-width: 450px;
  height: 75px;
  outline: 1px solid grey;
  margin: 2em auto;
  padding: 1em;
  border-radius: 0 1em 1em;
  position: relative;
  transition: height .3s ease;
}

div:before {
  content: "";
  height: 50px;
  position: absolute;
  width: .5em;
  background: red;
  left: 0;
  top: 0;
  border-radius: 1em 0 0 1em;
  transform: translateX(-100%);
}

div:hover {
  height: 100px;
}

<div>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit vitae, eligendi aperiam aut id illo neque nemo. Est, magnam assumenda.</p>
</div>