0 

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 でサイズが変更されます。

Codepen で直接表示するには、ここをクリックしてください

画像

4

2 に答える 2

2

ここで単にグラフィエントを使用できます： background-image: linear-gradient(to bottom left, #81B268 50%, #3B5D2A 50%);

以下のスニペットを実行して、ペンのフォークを見つけたり確認したりします

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>

于 2016-04-13T17:25:21.117 に答える