CSS 3 Divs rotated 45 degrees

Question

I'm trying to create this effect:

I need the three colors to be 3 different divs:

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

The 3 divs need to fully fill its parent. Its parent could be another div or even the full window size. Here is the rotation I tried but it doesn't full fill the space.

#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

You can use a simple gradient to achieve this:

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

<div class="box">

</div>

With 3 divs you can try like below with transform:

.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>

---

You can easily add animation using the first method by applying multiple background:

.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>

also using the second method by adjusting the translate value:

.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>

---

It can also work responsively:

.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>

For more details about the values used with background: Using percentage values with background-position on a linear gradient

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>

Do you mean like this?

I used css rotate and transform to achieve this.