两个div共享相同的线性渐变背景

Question

我有两个子div，我希望它们具有相同的线性渐变背景，顶部div是动态的，并且它向左，向右和居中移动，所以我想与底部div具有相同的背景。

#pool-container {
width: 100%;
margin: 0 5px 0 5px;
display: flex;
flex-direction: column;


#side-step {
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
}
#main-pool {
  width: 100%;
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
}


<div id="pool-container">
    <div id="side-step"></div>
    <div id="main-pool"></div>
</div>

Answer 1

这是您的操作方法

有更好的方法吗？老实说，我不知道。

#pool-container {
  width: 800px;
  height: 600px;
  margin: 0 5px 0 5px;
  display: flex;
  flex-direction: column;
  background: #119955;
  padding: 15px;
}

#wrapper {
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
  width: 100%;
  height: 100%;
}

#excluded-area {
  width: 50%;
  height: 200px;
  background: #119955
}

#side-step {
  width: 50%;
  height: 200px;
}

#main-pool {
  width: 100%;
  height: 200px;
}

<div id="pool-container">
    <div id="wrapper">
        <div id="excluded-area"></div>
        <div id="side-step"></div>
        <div id="main-pool"></div>
    </div>
</div>

Answer 2

这是使用伪元素的技巧。这个想法是使两个伪元素都相对于主容器（而不是每个元素），然后在其中应用渐变。然后，我们使用clip-path裁剪伪元素，以便它们仅显示在其元素内部：

#pool-container {
  padding: 20px;
  width: 200px;
  margin: 0 5px 0 5px;
  display: flex;
  flex-direction: column;
  background: green;
  position:relative;
}

#side-step {
  height:50px;
  width:50px;
  transition:1s all;
}
#pool-container:hover #side-step{
  margin-left:150px;
}
#side-step, 
#main-pool {
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
#side-step::before, 
#main-pool::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: linear-gradient( 120deg, rgba(248, 201, 129, 1) 0%, rgba(227, 76, 145, 1) 100%);
}

#main-pool {
  width: 100%;
  height:150px;
}

<div id="pool-container">
  <div id="side-step"></div>
  <div id="main-pool"></div>
</div>