Как получить строки вокруг текста с разрывом между ними? - PullRequest
Новая
       9

Как получить строки вокруг текста с разрывом между ними?

2 голосов
/ 16 октября 2019

Я должен добавить строки вокруг текста, где между ними есть пробелы, чтобы не было просто добавлением границы вокруг. Ниже приведено то, что ожидается, но я не уверен, с чего начать, чтобы изменить границу так, чтобы она имела пробелы, как показано на рисунке.

С точки зрения расстояния и границы,

  • Они должны быть 10px сбоку. Так что верхний должен быть 10px с правой стороны. Нижний должен быть 10px слева.
  • Пробелы могут быть в любом месте от 8px или 16px по ширине.
  • Граница должна быть либо 1px, либо3px в зависимости от того, что возможно.

Для решения, если требуется больше элементов html или если мы должны нацеливаться на любые псевдоэлементы css, то это нормально.

Желаемый вывод:

border around text

Я попробовал следующее, но не могу заставить его работать какизображение. 

.box { 
  border-top:    1px solid black;
  border-right:  1px solid black; 
  border-bottom: 1px solid black;
}
<div class="box">
Some text inside
</div>

1 Ответ

3 голосов
/ 16 октября 2019

Использовать градиент 

.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>
...