一侧带有扩展边框的框

Question

我已经在这个问题上坐了几天，搜索了十几个 * 答案，但无济于事。

我想实现一个像图中的动态框。

我目前的所有尝试都没有成功，我让它在所有 4 个面都扩展的情况下工作，或者只使用固定的盒子尺寸（如果盒子尺寸改变，所有的都会坏），但这不是我正在尝试的在这里实现。 任何帮助将不胜感激！

编辑： 我尝试修改这个 * post 的答案，但我无法像图片中那样仅通过一行扩展来使其工作。

“动态”可能是一个错误的词选择，我只是想让它响应，而不破坏扩展的边界线。

Answer 1

这样的事情对你有用吗？

JSFiddle DEMO

.box {
    width: auto;
    max-width: 200px;
    height: auto;
    background: white;
    border: 10px solid blue;
    position: relative;
    margin-top: 40px;
}

/* Adding the extended line */
.box:before {
    content: "";
    display: block;
    position: absolute;
    right: -10px;
    top: -40px;
    height: 40px;
    width: 10px;
    background: blue;
}

/* Dynamic height for test purposes */
.box:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

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