SkewX () математическая формула для полной ширины (3 деления рядом друг с другом)

Question

.parent {
  height:500px;
  width:500px;
  position:relative;
  background:black;
}
.test {
  transform: skewX(20deg);
  width:33%;
  height:100%;
  position:absolute;
}
.a {
    background:purple;
    left:0;
}
.b {
  background:green;
  left:33%;

}
.c {
  background:orange;
  left:66%;
}

<div class="parent">
  <div class="test a">

  </div>
  <div class="test b">

  </div>
  <div class="test c">

  </div>
</div>

Jsfiddle: http://jsfiddle.net/jksqc1ux/7/

Как видите, из-за перекоса вы все еще можете видеть фон родительского элемента. При равенстве всех трех элементов div, какой будет формула, чтобы заполнить 100% родительского элемента (чтобы вы больше не могли видеть черный цвет в коде фрагмента)? Родительские измерения могут иметь разные значения.

Я ищу что-то вроде .a {left: calc(33% *0.4)} или что-то подобное?

Answer 1

Математика говорит, что ширина 44% по данным Google, https://www.google.com/search?q=(33%25+%2B+sin(20 градусов) * 33% 25), но эти значения приводят к тому, что центральная область выглядит намного больше, если она применяется к левому и правому смещениям.

Calc не поддерживает смешанные единицы, поэтому предварительный расчет выглядит как требование.

.parent {
  height:500px;
  width:500px;
  position:relative;
  background:green;
  overflow:hidden;
}

.parent::before {
  content:'';
  background:purple;
  height:500px;
  width:44%; /* (33% + sin(20 degrees)*33%) = 44% */ 
  transform: skewX(20deg);
  position:absolute;
  left:-18%;
}
.parent::after {
  content:'';
  height:500px;
  width:44%;
  transform: skewX(20deg);
  position:absolute;
  background:orange;
  right:-18%;
}

<div class="parent">


</div>

Answer 2

Сначала настройте transform-origin на bottom left, чтобы упростить его, и вы получите результат, показанный на рисунке ниже.

Затем вам нужно отрегулировать свойства width и left на величину X, чтобы покрыть всю область. Для вычисления X необходимо использовать формулу: tan(deg) = X / height (X = height * tan(deg)), где deg - это степень, используемая для перекоса, а height - высота родительского элемента. Поскольку у вас есть 3 элемента, эту сумму нужно разделить между ними, чтобы всегда сохранять одинаковую ширину.

Я добавил некоторую непрозрачность, чтобы вы могли видеть, что все элементы соответствуют ширине родительского контейнера:

.parent {
  height:500px;
  width:500px;
  margin:auto;
  position:relative;
  background:black;
}
.test {
  transform: skewX(20deg);
  --X:calc(0.364 * 500px); /*tan(20deg) ~ 0.364*/
  transform-origin:bottom left;
  width:calc(calc(100%/3) + calc(var(--X)/3));
  height:100%;
  position:absolute;
  opacity:0.8;
}
.a {
    background:purple;
    left:0;
}
.b {
  background:green;
  left:calc(calc(100%/3) + calc(var(--X)/3));

}
.c {
  background:orange;
  left:calc(calc(2*100%/3) + calc(2 * var(--X)/3));
}

<div class="parent">
  <div class="test a">

  </div>
  <div class="test b">

  </div>
  <div class="test c">

  </div>
</div>

Другой способ получить аналогичный эффект с меньшим количеством кода - использовать градиент:

.parent {
  height:500px;
  width:500px;
  margin:auto;
  position:relative;
  background:
  linear-gradient(70deg, purple 0,purple 33%, green 33%, green 66%,orange 66%,orange 100%);
}

<div class="parent">

</div>

Answer 3

Попробуйте, он должен соответствовать всем размерам: (см. Скрипку: http://jsfiddle.net/jksqc1ux/85/)

.parent {
  height:500px;
  width:500px;
  position:relative;
  background:black;
  overflow:hidden;
}
.test {
  transform: skewX(20deg);
  width:50%;
  height:100%;
  position:absolute;
}
.a {
    background:purple;
        right: 75%;
}
.b {
  background:green;
      right: 25%;

}
.c {
  background:orange;
      left: 75%;
}

<div class="parent">
  <div class="test a">

  </div>
  <div class="test b">

  </div>
  <div class="test c">

  </div>
</div>