html - 带有伪类的 CSS 剪辑路径，用于制作自定义页脚

<分区>

我需要一些帮助来破解 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;
 }
}

这是我期望的结果:

enter image description here

如有任何帮助，我们将不胜感激。谢谢!

最佳答案

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>

关于html - 带有伪类的 CSS 剪辑路径，用于制作自定义页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56910957/

上一篇：html - 使用组件作为 ngx-translate 键的参数

下一篇：javascript - 为什么导航选项卡和选项卡 Pane 不起作用？

相关文章：

html - 检查网络字体中的字符

javascript - 从输入表单获取文本返回空字符串，但 console.log 显示显示文本

html - 当我调整浏览器大小时，我的元素相互重叠

css - 向表格添加边距会使其溢出父级

javascript - CSS/JS 选择器 - 选择类不等于的最后一个元素

javascript - 汉堡菜单仅适用于一个链接

html - 将三 Angular 形与文本居中对齐

javascript - 在 View 中激活 javascript 动画

html - 应用于子元素的 CSS 规则顺序

javascript - 进度条动画