具有Pseudo类的CSS剪切路径，用于创建自定义页脚

Question

我需要一点帮助来破解CSS，以便为具有伪类和剪切路径的自定义网站添加页脚。因此，我遇到了麻烦，无法按应有的方式使其工作。页脚由两种不同的颜色制成。我进行了搜索以查看一些适当的答案；我没找到。我不太远，但是我还没有得到想要的东西。

我的CSS文件：

.footer_style{
  position: relative;
 margin: 1rem auto;
 min-height: 400px;
 width: 100%;
 display: flex;
 flex-flow: column nowrap;
 align-content: center;
 align-items: center;
 justify-content: center;
 background: #232323;
 // clip-path: polygon(51% 9%, 100% 0, 100% 100%, 1% 100%, 0 19%);
 &:before{
   content: '';
   z-index: -1;
   position: absolute;
   top: -26px;
   left: -11px;
   right: 30px;
   bottom: 30px;
   -webkit-clip-path: polygon(100% 0, 100% 100%, 0 99%, 0 19%);
   clip-path: polygon(100% 0, 100% 100%, 0 99%, 0 19%);
   background: #0465e3;
   -webkit-transform: rotate(6deg);
   transform: rotate(6deg);
   height: 126px;
 }
}

这是我期望的结果：

任何帮助将不胜感激。谢谢！

Answer 1

clip-path在浏览器中是not well supported。

简单的linear-gradient解决方案如何？

body {background:#eef}

footer {
  height: 400px;
  background: 
  linear-gradient(-7deg, #234 395px, transparent 396px), linear-gradient(7deg, #06f 395px, #fff 396px);
}

<footer></footer>