Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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 Skew以触摸左右角

1 个答案: