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

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

public function colorTags() {
    return $this->hasMany('App\Image', 'color_id', 'id');
}

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

使用3个div，您可以像下面那样使用transform：

<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%;
}

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

有关与背景一起使用的值的更多详细信息：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>

你是这个意思吗？

我使用CSS旋转和变换来实现这一点。

CSS 3 Divs旋转45度

2 个答案: