CSS 3 Divs повернут на 45 градусов

Question

Я пытаюсь создать этот эффект:

Мне нужно, чтобы три цвета были 3 разных div:

<div>
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
</div>

3 элемента div должны полностью заполнить его родительский элемент. Его родителем может быть другой div или даже полный размер окна. Вот вращение, которое я пробовал, но оно не полностью заполняет пространство.

#green {
  height: 100%;
  background-color: green;
  width: 37.5%;
  transform: rotate(45deg)
}

#red {
  height: 100%;
  background-color: red;
  width: 25%;
  transform: rotate(45deg)
}

#blue {
  height: 100vh;
  background-color: blue;
  width: 37.5%;
  transform: rotate(45deg)
}

<div>
  <div id="red"></div>
  <div id="blue"></div>
  <div id="green"></div>
</div>

Answer 1

Вы можете использовать простой градиент для достижения этой цели:

.box {
  width:150px;
  height:150px;
  background:
    linear-gradient(to bottom right,red 35%,blue 35%,blue 65%,yellow 65%);
}

<div class="box">

</div>

С 3 делениями вы можете попробовать как показано ниже с преобразованием:

.box {
  width:150px;
  height:150px;
  position:relative;
  overflow:hidden;
}

.box :first-child {
  width:100%;
  height:100%;
  background:blue;
}
.box :nth-child(2),
.box :last-child {
  position:absolute;
  width:141%; /*sqrt(2)x100% */
  height:141%;
}

.box :nth-child(2) {
  top:0;
  left:0;
  background:red;
  transform:rotate(45deg) translate(-90%);
}
.box :last-child {
  bottom:0;
  right:0;
  background:yellow;
  transform:rotate(45deg) translate(90%)
}

<div class="box">
  <div></div>
  <div></div>
  <div></div>
</div>

---

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

.box {
  width:150px;
  height:150px;
  background:
    linear-gradient(to bottom right,red   50%,transparent 0),
    linear-gradient(to top left    ,yellow 50%,transparent 0),
    blue;
  background-size:200% 200%;
  background-position:100% 100%,0 0;
  transition:1s all;
}
.box:hover {
  background-position:50% 50%;
}

<div class="box">

</div>

также с использованием второго метода путем корректировки значения перевода:

.box {
  width:150px;
  height:150px;
  position:relative;
  overflow:hidden;
}

.box :first-child {
  width:100%;
  height:100%;
  background:blue;
}
.box :nth-child(2),
.box :last-child {
  position:absolute;
  width:141%; /*sqrt(2)x100% */
  height:141%;
  transition:1s all;
}

.box :nth-child(2) {
  top:0;
  left:0;
  background:red;
  transform:rotate(45deg) translate(calc(-1 * var(--p,120%)));
}
.box :last-child {
  bottom:0;
  right:0;
  background:yellow;
  transform:rotate(45deg) translate(var(--p,120%))
}

.box:hover{
  --p:70%;
}

<div class="box">
  <div></div>
  <div></div>
  <div></div>
</div>

---

Он также может работать быстро:

.box {
  height:100vh;
  background:
    linear-gradient(to bottom right,red    50%,transparent 50.1%),
    linear-gradient(to top left    ,yellow 50%,transparent 50.1%),
    blue;
  background-size:200% 200%;
  background-position:100% 100%,0 0;
  transition:1s all;
}
.box:hover {
  background-position:50% 50%;
}

body {
 margin:0;
}

<div class="box">

</div>

Подробнее о значениях, используемых с фоном: Использование процентных значений с положением фона на линейном градиенте

Answer 2

body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}
#wrapper {
  width: 20rem;
  height: 20rem;
  position: relative;
  overflow: hidden;
}

#red, #blue, #green {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#red {
  background: red;
  transform: rotate(45deg) translatex(-75%);
}

#blue {
  background: blue;
}

#green {
  background: green;
  transform: rotate(45deg) translatex(75%);
}

<div id="wrapper">
  <div id="blue"></div>
  <div id="red"></div>
  <div id="green"></div>
</div>

Вы имеете в виду, как это?

Я использовал css rotate и transform для достижения этой цели.