HTML-граница без отступов или пользовательская граница длины для элемента - PullRequest
Новая
       30

HTML-граница без отступов или пользовательская граница длины для элемента

0 голосов
/ 05 октября 2018

Как добавить границу в DIV, ширина которой должна быть меньше, чем у элемента?Вот так:

Border width set

В настоящее время у меня есть:

Столбец-1 

border-bottom: 1px solid grey;

Столбец-2 

border-left: 1px solid grey;
border-bottom: 1px solid grey;

Столбец-3 

border: none;

Столбец-4 

border-left: 1px solid grey;

4columns with border

Я хочуграницы, чтобы не занимать пространство заполнения div, например:

wanted result

Ответы [ 3 ]

0 голосов
/ 05 октября 2018

Вы можете попробовать градиент следующим образом: 

h1 {
  padding: 5px;
  background:
    linear-gradient(red,red) top center/calc(100% - 15px) 5px,
    linear-gradient(red,red) bottom center/calc(100% - 15px) 5px,
    linear-gradient(red,red) left center/5px calc(100% - 15px),
    linear-gradient(red,red) right center/5px calc(100% - 15px);
  background-repeat: no-repeat;
  display:inline-block;
}
<h1>
  A heading title
</h1>

Вы можете ввести переменную CSS, чтобы упростить обработку: 

h1 {
  padding: var(--p,5px);
  margin:10px;
  background:
    linear-gradient(red,red) top center/calc(100% - var(--d,10px)) var(--p,5px),
    linear-gradient(red,red) bottom center/calc(100% - var(--d,10px)) var(--p,5px),
    linear-gradient(red,red) left center/var(--p,5px) calc(100% - var(--d,10px)),
    linear-gradient(red,red) right center/var(--p,5px) calc(100% - var(--d,10px));
  background-repeat: no-repeat;
  display:inline-block;
}
<h1>
  A heading title
</h1>

<h1 style="--p:10px;--d:20px">
  A heading title
</h1>
<h1 style="--d:30px">
  A heading title
</h1>
<h1 style="--d:0px">
  A heading title
</h1>
0 голосов
/ 05 октября 2018 

.row1 {
  padding: 100px 100px 100px;
  display: flex;
}
.Column-1 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-bottom: 1px solid grey;
}
.Column-2 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-left: 1px solid grey;
  border-bottom: 1px solid grey;
  margin-left: 10px;
}
.row2 {
  padding: 0 100px 0;
  display: flex;
}
.Column-3 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border: none;
}
.Column-4 {
  background-color: #00FFFF;
  width: 300px;
  height: 150px;
  border-left: 1px solid grey;
  margin-left: 10px;
}
<div class="row1">
  <div class="Column-1"></div>
  <div class="Column-2"></div>
</div>
<div class="row2">
  <div class="Column-3"></div>
  <div class="Column-4"></div>
</div>

Пожалуйста, проверьте этот код.

0 голосов
/ 05 октября 2018

Вы можете добиться этого эффекта, используя два линейных градиента - один для верхней / нижней границ и один для левой / правой границ: 

.clipped-border {
  padding: 0 0.2em;
  background: 
    linear-gradient(to bottom, 
      red 4px, 
      transparent 4px, 
      transparent calc(100% - 4px), 
      red calc(100% - 4px)
    ),
    linear-gradient(to right, 
      red 5px, 
      transparent 5px, 
      transparent calc(100% - 4px), 
      red calc(100% - 4px)
    );
  background-size: 95% 100%, 100% 50%;
  background-repeat: no-repeat;
  background-position: center;
}
<h1 class="clipped-border">
  A heading with a solid red border
</h1>
...