Question

我制作了以下代码笔：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);
}

Answer 1

此css解决了您的问题，所有的应用程序都有效：

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

Solved solution

CSS-无法摆脱边界

1 个答案: