创建 CSS 倾斜以触摸左右角

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>

这在较小的屏幕上工作正常，但如果您在较大的屏幕上检查，红色倾斜形状会从左侧的蓝色框中消失。

因为transform-origin被指定为指向蓝色框的右下角。有没有办法让在任何解决方案中，这种倾斜形状都停留在蓝色和绿色框的中间？所以它应该隐藏这两个框的合并线。

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>

更新

这是另一个带有背景图片的想法：

.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>

创建 CSS 倾斜以触摸左右角

Create CSS Skew to touch left right corners

html

css

css-transforms