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

学习前端遇到的问题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链接

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

可以参考这个网址https://blog.csdn.net/nnnnnnn3/article/details/109724064
理解一下。通过改变角度属性变成梯形。calc(55% + 1px)这些参数都是设置角度用的

• 这篇博客也许可以解决你的问题👉 ：linear-gradient的用法详解

渐变

怎么弄得梯形。哥们你没看到一个-88.75deg 一个 88.75deg吗。那是两个角度。倾斜一下就成梯形了，