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

您可以在这里简单地使用 grafient ： 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 回答
0

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

于 2016-04-13T17:05:07.730 回答