CSS 3 个 Div 旋转 45 度

Question

我正在尝试创建这种效果：

我需要三种颜色是3种不同的divs:

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

这 3 个 div 需要完全填充其父项。它的父级可以是另一个 div 甚至是完整的 window 大小。这是我尝试过的轮换，但它没有完全填满 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

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 旋转和变换来实现这一点。

Answer 2

您可以使用简单的渐变来实现：

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

<div class="box">

</div>

对于 3 个 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%;
}

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

有关与背景一起使用的值的更多详细信息：Using percentage values with background-position on a linear gradient

CSS 3 个 Div 旋转 45 度

CSS 3 Divs rotated 45 degrees

html

css

css-transforms