html - 如何在文本周围添加线条并在其间换行？

Question

我必须在文本周围添加线条，其中之间有空格，这样这不仅仅是添加边框的问题。下面是预期的内容，但我不确定从哪里开始修改边框，使其具有如图所示的间隙。

在间距和边框方面，

• 它们距离侧面必须 10px。所以最上面的应该距右侧 10px 。底部距离左侧应为 10px。
• 空格的宽度可以是 8px 或 16px 之间的任意位置。
• 根据可能的情况，边框应为 1px 或 3px。

对于解决方案，如果需要更多 html 元素，或者如果我们必须针对任何 css 伪元素，那就没问题。

所需输出:

我尝试了以下操作，但无法让它像图像一样工作。

.box { 
  border-top:    1px solid black;
  border-right:  1px solid black; 
  border-bottom: 1px solid black;
}

<div class="box">
Some text inside
</div>

Answer 1

使用渐变

.box { 
  padding:20px;
  display:inline-block;
  border-right:2px solid;
  border-left:2px solid;
  background:
    linear-gradient(to left ,#000 10px,transparent 10px 30px,#000 0) top,
    linear-gradient(to right,#000 10px,transparent 10px 30px,#000 0) bottom;
  background-size:100% 2px;
  background-repeat:no-repeat;
}

<div class="box">
Some text inside
</div>

带有 CSS 变量，方便调整:

.box { 
  --b:2px;  /* Thickness of border */
  --g:10px; /* The gap */
  --s:10px; /* The offset of the gap */
  
  --grad:#000 var(--s),transparent var(--s) calc(var(--s) + var(--g)),#000 0;
  padding:20px;
  display:inline-block;
  border-right:var(--b) solid;
  border-left:var(--b) solid;
  background:
    linear-gradient(to left ,var(--grad)) top,
    linear-gradient(to right,var(--grad)) bottom;
  background-size:100% var(--b);
  background-repeat:no-repeat;
}

<div class="box">
Some text inside
</div>

<div class="box" style="--s:20px;--g:50%;--b:5px;">
Some text 
</div>

<div class="box" style="--s:80%;--g:10%;--b:1px">
Some text<br> inside
</div>

使用剪辑路径的另一个想法:

.box { 
  --b:2px;  /* Thickness of border */
  --g:10px; /* The gap */
  --s:10px; /* The offset of the gap */

  padding:20px;
  display:inline-block;
  border:var(--b) solid;
  clip-path:polygon(0 0, 
  
    calc(100% - var(--s) - var(--g)) 0,
    calc(100% - var(--s) - var(--g)) var(--b),
    calc(100% - var(--s))            var(--b),
    calc(100% - var(--s))            0,
  
    100% 0,100% 100%, 
    
    calc(var(--s) + var(--g)) 100%,
    calc(var(--s) + var(--g)) calc(100% - var(--b)),
    var(--s)                  calc(100% - var(--b)),
    var(--s)                  100%,
    
    0 100%);
}

<div class="box">
Some text inside
</div>

<div class="box" style="--s:20px;--g:50%;--b:5px;">
Some text 
</div>

<div class="box" style="--s:80%;--g:10%;--b:1px">
Some text<br> inside
</div>