对角线块元素的划分与响应

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

背景图像线性渐变具有这种可能性。您需要使用转角语法

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;