一侧有扩展边框的框

Question

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

我想实现如图所示的动态框。

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

编辑：我尝试修改这个 Whosebug 的答案，但我无法让它只用一行展开，如图所示。

"dynamic" 可能选错了词，我只是想让它响应，而不破坏扩展的边界线。

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>

一侧有扩展边框的框

Box with expanded border on one side

html

css

border