学习前端遇到的问题5：这段linear-gradient代码是在做什么？

Question

学习前端遇到的问题5：这段linear-gradient代码是在做什么？

代码如下

<div></div>

body {
  height: 100vh;
  background: red;
  display: grid;
  place-items: center;
}
div {
  width: 500px;
  height: 400px;
  background: linear-gradient(
      -88.75deg,
      #fff0 1.5em,
      #ffffff calc(1.5em + 1px) 55%,
      #fff0 calc(55% + 1px)
    ),
    linear-gradient(
      88.75deg,
      #fff0 1.5em,
      #ffffff calc(1.5em + 1px) 55%,
      #fff0 calc(55% + 1px)
    );
}

结果

结果是一个梯形。将一个矩形变成一个梯形应该是和这段代码有关，但没看懂。

  background: linear-gradient(
      -88.75deg,
      #fff0 1.5em,
      #ffffff calc(1.5em + 1px) 55%,
      #fff0 calc(55% + 1px)
    ),
    linear-gradient(
      88.75deg,
      #fff0 1.5em,
      #ffffff calc(1.5em + 1px) 55%,
      #fff0 calc(55% + 1px)
    );

codepen链接

Answer 1

颜色渐变
https://www.runoob.com/cssref/func-linear-gradient.html
有帮助的话采纳一下哦！