CODEWITHSUNDEEP
htmlcsscss-shapesresponsive
cvall
cvall

Reputation: 25

% based triangle that keeps the height of neighbouring div

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>

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.

To view directly in Codepen click here

image

Upvotes: 0

Views: 66

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

You could simply use a grafient here : background-image: linear-gradient(to bottom left, #81B268 50%, #3B5D2A 50%);

Run snippet below to find out or 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>

Upvotes: 2

KristiyanB
KristiyanB

Reputation: 3

Insert an image inside the desired div element and the image should contain your desired triangle and leave the bottom-left transparent. Then set the background of the div enclosing the image to the darker green.

Upvotes: 0

Related Questions