% based triangle that keeps the height of neighbouring div
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;

  &lt;div class="work-left"&gt;
    &lt;div class="work-left-triangle"&gt;&lt;/div&gt;
  &lt;/div&gt;


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

&lt;/section&gt;</code></pre>
</div>
</div>
</p>

<p>I am trying to make a responsive triangle as part of the header, that keeps it proportions when resizing with the neighbouring div. Code pen link with my structure here. I am having trouble to make a triangle that sits in the right space (tried rotating and overflog hidden) and on top of that resizes with the div next to it. </p>

<p>To view directly in Codepen click <a href="http://codepen.io/chrisvall/pen/qZoqeJ" rel="nofollow noreferrer">here</a></p>

<p><a href="https://i.stack.imgur.com/0gD26.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0gD26.jpg" alt="image"></a></p>