html - 如何设计css 的 "overflowing"边框线？

Question

刚接触 css，虽然尝试了不同的方法，但我无法设计出具有我想要的边框的内容框。它应该看起来像这样:

换句话说:边界应该相互交叉并持续大约 30px，也许我们可以称之为溢出。导致所有四个边都出现交叉。

我曾尝试在每个边缘设计小的立方体盒子，而且还挺管用的。但我发现很难将它们包含在我的响应概念中，因为它们不会以与实际盒子(我们称之为 <box>)相同的速度收缩。 <box>有边距百分比，所以当页面被缩小时，小方框 <sbox>挡住了我的路并阻止了 <box> 的边距从一直延伸到框架边界。

关于如何使它更优雅的任何想法？

Answer 1

您可以借助 before 和 after 伪类来完成此操作。

* { box-sizing:border-box; }
.box { padding:20px; width:100px; height:100px;  position:relative;  border-left:2px solid #000; border-right:2px solid #000;  }

.box::after { position:absolute; top:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}

.box::before { position:absolute; bottom:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}

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

Demo