基于％的三角形，保持相邻div的高度

Question

section {
  height: 100%;
}
.work-left {
  width: 35vw;
  height: 100vh;
  float: left;
  background-color: #3B5D2A;
  position: relative;
}
.work-right {
  width: 60vw;
  height: 100vh;
  background-color: blue;
  float: left;
  position: relative;
}
.work-left-triangle {
  width: 100%;
  height: 30vh;
  background-color: #81B268;
  position: absolute;
}
.work-right-title {
  width: 100%;
  height: 30vh;
  background-color: #AEDF95;
}
.image-container {
  width 100%;
  height: 70vh;
  background-color: yellow;
  overflow: scroll;
}
.image {
  width: 100%;
  height: auto;
  display: block;
}

<section>

  <div class="work-left">
    <div class="work-left-triangle"></div>
  </div>


  <div class="work-right">
    <div class="work-right-title"></div>
    <div class="image-container">
      <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/1/12/Singapore_Botanic_Gardens_Cactus_Garden_2.jpg">
      <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/1/12/Singapore_Botanic_Gardens_Cactus_Garden_2.jpg">
    </div>
  </div>

</section>

我正在尝试将响应三角形作为标题的一部分，在使用相邻div调整大小时保持比例。代码笔链接我的结构在这里。我无法制作一个位于正确空间的三角形（尝试旋转并覆盖过度日志），并在其旁边使用div旁边的div调整大小。

要直接在Codepen中查看，请点击here

Answer 1

您可以在此处使用grafient：background-image: linear-gradient(to bottom left, #81B268 50%, #3B5D2A 50%);

在下方运行代码段以查找或see the fork of your pen

＆＃13;

＆＃13;

section {
  height: 100%;
  /* demo snippet purpose */ min-width:670px;
}
.work-left {
  width: 35vw;
  height: 100vh;
  float: left;
  background-color: #3B5D2A;
  position: relative;
}
.work-right {
  width: 60vw;
  height: 100vh;
  background-color: blue;
  float: left;
  position: relative;
}
.work-left-triangle {
  width: 100%;
  height: 30vh;
  background-color: #81B268;
  background-image: linear-gradient(to bottom left, #81B268 50%, #3B5D2A 50%);
  position: absolute;
}
.work-right-title {
  width: 100%;
  height: 30vh;
  background-color: #AEDF95;
}
.image-container {
  width 100%;
  height: 70vh;
  background-color: yellow;
  overflow: scroll;
}
.image {
  width: 100%;
  height: auto;
  display: block;
}

＆＃13;

<section>
  <div class="work-left">
    <div class="work-left-triangle"></div>
  </div>
  <div class="work-right">
    <div class="work-right-title"></div>
    <div class="image-container">
      <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/1/12/Singapore_Botanic_Gardens_Cactus_Garden_2.jpg">
      <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/1/12/Singapore_Botanic_Gardens_Cactus_Garden_2.jpg">
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在所需的div元素中插入图像，图像应包含所需的三角形，并保持左下角透明。然后将包围图像的div的背景设置为较深的绿色。