创建CSS倾斜来触摸左右角落

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

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

---

你可以尝试这样的事情：

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

链接地址: http://www.djcxy.com/p/71229.html

上一篇: Create CSS Skew to touch left right corners

下一篇: origin back to the center of the element in CSS