Css - не могу избавиться от границы

Я сделал следующий код: https://codepen.io/chiptus/pen/rZKJyy, где у меня есть прожектор с широким источником, который может перемещаться. это вроде работает, но по какой-то причине между треугольниками и центральным прямоугольником есть пробел.

Контейнер прожектора находится прямо там, поэтому он не будет взаимодействовать с потоком страницы.

Прожектор состоит из трех частей - двух треугольников и центрального прямоугольника. Два треугольника созданы в играх с рамкой, а прямоугольник - это просто блок div того же цвета, что и треугольники.

Это CSS (я удалил некоторые переменные):

.spotlight-container > div {
  display: inline-block;
}

.spotlight-center {
  position: relative;
  height: 100%;
  text-align: center;
}

.spotlight-left::before,
.spotlight-right::before,
.spotlight-left::after,
.spotlight-right::after {
  content: '';
}

.spotlight-center {
  display: inline-block;
  margin-top: var(--spotlight-sourcey);
  height: calc(var(--spotlight-height) - var(--spotlight-sourcey));
  width: calc(var(--spotlight-source-width) * var(--spotlight-width));
  background-color: var(--spotlight-color);
}

.spotlight-left::before {
  display: inline-block;
  margin-top: var(--spotlight-sourcey);
  height: 0;
  width: 0;
  border: 3px solid;
  border-top-width: 0;
  border-bottom-width: calc(var(--spotlight-height) - var(--spotlight-sourcey));
  border-left-width: calc(var(--spotlight-sourcex) * var(--spotlight-width));
  border-right-width: 0;
  border-color: transparent transparent var(--spotlight-color);
}

.spotlight-right::before {
  display: inline-block;
  margin-top: var(--spotlight-sourcey);
  height: 0;
  width: 0;
  border: 3px solid;
  border-top-width: 0;
  border-bottom-width: calc(var(--spotlight-height) - var(--spotlight-sourcey));
  border-left-width: 0;
  border-right-width: calc(
    (1 - var(--spotlight-sourcex)) * var(--spotlight-width)
  );
  border-color: transparent transparent var(--spotlight-color);
}
0
0
316
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Измените свой селектор .spotlight-container > div на это:

.spotlight-container > div {
    float: left;
}

Разрывы вызваны тем, как элементы выстраиваются в линию при отображении как встроенный блок.

Очень распространенный обходной путь для зазоров между встроенными блоками - просто переместить все элементы влево или вправо.

также работало решение Факундо Коррадини, но это кажется мне более общим решением, так как оно будет работать также с текстом.

Chiptus 15.09.2018 19:07

Этот css решает вашу проблему, и все приложения работают:

.spotlight-center,
.spotlight-right,
.spotlight-left{
   float:left;
}

Решенное решение

Пробелы создаются из-за неприглядного поведения пробелов в элементах inline-block.

Если на вашем контейнере прожектора (и на любом потомке) не будет текста, самое простое решение - установить для него размер шрифта равным нулю.

.spotlight-container { font-size:0; }

Другие вопросы по теме