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>

Snapstromegon · Answer 1 · 2019-04-10T07:15:25.917

5

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.

edited Apr 10 '19 at 07:15

answered Apr 09 '19 at 19:52

Snapstromegon

330
3
8

Yes very close. The only issue I would still have is if the window size isn't a perfect square. – Tom Apr 09 '19 at 19:58
In the future please post a complete answer here, not on another site. – j08691 Apr 09 '19 at 21:00
Changed answer to use internal snippet function – Snapstromegon Apr 10 '19 at 07:16

Temani Afif · Accepted Answer · 2019-04-10T14:00:16.890

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

@Tom check the update, can be more specific on the animation you want to do? — Temani Afif, Apr 09 '19 at 20:03
The 3 colors will be overlaid on top of content and will slide out to reveal items behind it. The red and green divs will slide towards the bottom left and the blue will slide to the top right. The container will also not be a perfect square. It may the be the window size on a mobile phone for example. — Tom, Apr 09 '19 at 20:07
@Tom then check the last one, you only need to adjust the value of translate to create the needed animation — Temani Afif, Apr 09 '19 at 20:10

CSS 3 Divs rotated 45 degrees

2 Answers2