创建CSS Skew以触摸左右角

Question

我已经创建了一个这样的样本，可以在下面看到

.box1 {
  width: 100%;
  height: 300px;
  background-color: lightblue;
  position: relative;
}
.box1::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  height: 100px;
  background-color: red;
  transform: skew(0deg, -6deg);
  -webkit-transform: skew(0deg, -6deg);
  transform-origin: bottom right;
}

.box2 {
  width: 100%;
  height: 300px;
  background-color: lightgreen;
  position: relative;
}

<div class="box1"></div>

<div class="box2"></div>

当屏幕较小时，这可以正常工作，但如果你检查更大的屏幕，红色歪斜的形状从左侧出来的蓝色框。

由于变换原点被赋予蓝色框的右下角。有没有办法在任何解决方案中，这种扭曲形状保持在蓝色和绿色框的中间？所以它应该隐藏这两个盒子的合并线。

Answer 1

你可以尝试这样的事情：

.box1 {
  height: 300px;
  background:lightblue;
  position:relative;
}
.box1:after {
  content:"";
  position:absolute;
  bottom:-100px;
  left:0;
  right:0;
  height:200px;
  background:linear-gradient(to bottom,lightblue 30%,red 31%,red 70%,lightgreen 71%);
  transform:skewY(-6deg);
}
.box2 {
  height: 300px;
  background-color:lightgreen;
}

<div class="box1"></div>
<div class="box2"></div>

UPDATE

这是背景图像的另一个想法：

.box1 {
  height: 300px;
  background:url(https://lorempixel.com/1000/1000/);
  position:relative;
}
.box1:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:100px;
  background:linear-gradient(to bottom right,transparent 50%,red 50.5%);
}
.box2 {
  height: 300px;
  background:url(https://lorempixel.com/800/1000/);
  position:relative;
}
.box2:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100px;
  background:linear-gradient(to top left,transparent 50%,red 50.5%);
}

<div class="box1"></div>
<div class="box2"></div>