CSS 左边距问题

Question

我这里有5条斜条纹……

..我左边有问题（右边-> 它应该是 window-填充），它是空的，也应该有条纹，从左边（从无到有）。不管什么浏览器-window尺寸。我知道我的 margin-left 有问题，但我没有得到我想看到的结果。

而且两边的间距要一样

HTML代码：

  <div class="stripe"></div>
  <div class="stripe"></div>
  <div class="stripe"></div>
  <div class="stripe"></div>
  <div class="stripe"></div>

CSS代码：

.stripe {
  height: 100%;
  width: 2%;
  background-color: black;
  position: fixed;
  transform: skew(-20deg);
  transform-origin: left bottom;
}

.stripe:nth-child(1) {
  height: 100%;
  width: 2%;
  margin-left: 0%;
  background-color: black;
  position: fixed;
}



.stripe:nth-child(2) {
  height: 100%;
  width: 2%;
  margin-left: 4%;
  background-color: black;
  position: fixed;
  animation-delay: 0.2s;
}

.stripe:nth-child(3) {
  height: 100%;
  width: 2%;
  margin-left: 8%;
  background-color: black;
  position: fixed;
}

.stripe:nth-child(4) {
  height: 100%;
  width: 2%;
  margin-left: 12%;
  background-color: black;
  position: fixed;
}

.stripe:nth-child(5) {
  height: 100%;
  width: 2%;
  margin-left: 16%;
  background-color: black;
  position: fixed;
}

我想要的结果图片：

Answer 1

希望这是您所期望的。

在下面的示例中，每个 stripe 具有 2% 宽度和 1% 左右边距 ~> 它具有总共 4% 的视口宽度。要填充 100% 视口，您需要 100 / 4 = 25 条纹。 .mask 元素帮助我们从 .container 的负边缘隐藏溢出空间。结果完全以中心点对称。

html, body {
  height: 100%;
  margin: 0;
}

.mask {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  margin: 0 -100vh;
}

.stripe {
  float: left;
  height: 100%;
  width: 2%;
  margin: 0 1%;
  background-color: black;
  transform: skew(-20deg);
  transform-origin: center center;
}

<div class="mask">
  <div class="container">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
</div>

CSS 左边距问题

CSS margin-left issue

html

css

margin

margin-left