歪斜的背景只是CSS

Question

需要将背景分为两部分：

我有：

body {
  background: #b6da8c;
  overflow: hidden;
}

body:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: #005370;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
  z-index: -1;
}

正如你所看到的那样，实际上又分为3个，如何将它改为2，就像在图像上一样？

Answer 1

您可以将transform-origin更改为底部。

body {
  background: #b6da8c;
  overflow: hidden;
}

body:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: #005370;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
  z-index: -1;
  transform-origin: bottom;
}

Answer 2

非常简单的修复，无需对代码进行太多修改。只需将元素从屏幕上移开并增加其宽度即可。

body { 
background: #b6da8c;
overflow: hidden;
}

body:before {
  content: '';
  position: absolute;
  top: 0; right: -200px;
  width: 60%; height: 100%;
  background: #005370;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
  z-index: -1;
}

Answer 3

只需将正确的值设为负值，使其溢出并使宽度更大以补偿隐藏的部分：

＆＃13;

＆＃13;

body {
  background: #b6da8c;
  overflow: hidden;
}

body:before {
  content: '';
  position: absolute;
  top: 0;
  right: -30%;
  width: 70%;
  height: 100%;
  background: #005370;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
  z-index: -1;
}

＆＃13;

＆＃13;

＆＃13;

您可以轻松地使用身体上的背景和线性渐变来执行相同的操作，如下所示：

＆＃13;

＆＃13;

body {
  background: linear-gradient(100deg,  #b6da8c 50%, #005370 0%);
  overflow: hidden;
  height:100vh;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

body {
  background: #b6da8c;
  overflow: hidden;
}

body:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 70%;
  height: 100%;
  background: #005370;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
  z-index: -1;
}

＆＃13;

＆＃13;

＆＃13;