基于 % 的三角形保持相邻 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>

我正在尝试制作一个响应式三角形作为 header 的一部分，以便在调整与相邻 div 的大小时保持比例。代码笔 link 与我的结构在这里。我无法制作一个位于右侧 space 的三角形（尝试旋转并隐藏 overflog）并在其顶部调整大小并在其旁边设置 div。

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

Answer 1

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

Answer 2

你可以在这里简单地使用一个 grafient : background-image: linear-gradient(to bottom left, #81B268 50%, #3B5D2A 50%);

运行下面的代码片段以找出或 see the fork of your pen

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

<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 的高度

% based triangle that keeps the height of neighbouring div

html

css

css-shapes

responsive