根据响应性对角线划分块元素

Question

我需要把一个盒子分成两部分，从左上角对角线到右下角。下面的部分只是有另一种颜色的阴影。

我在演示中尝试并获得了具有值的需求。但没有反应。photoContainer-div的宽度是100%，所以它是响应的。现在问题出现了。我做了解决方案的照片容器的特定宽度。但是，我需要响应性的要求。

.photo-container {
  background-color: lightgreen;
  height: 285px;
  overflow: hidden;
  position: relative;
}
.shade {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.shade:before {
  content: "";
  width: 125%;
  height: 100%;
  display: block;
  background-color: #ff0;
  opacity: 0.3;
  position: absolute;
  transform: rotate(14.45deg);
  top: 40%;
  left: -24%
}

<div class="photo-container">
  <div class="shade"></div>
</div>

Answer 1

Background-image linear-gradient有这种可能性。你需要使用来代替语法

.photo-container {
  background-color: lightgreen;
  height: 285px;
  overflow: hidden;
  position: relative;
}
.shade {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to top right, yellow 50%, transparent 50%);
}

<div class="photo-container">
  <div class="shade"></div>
</div>