带有伪类的 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>