CSS:具有倾斜边框的自定义形状

我有一个用html和CSS创建的自定义花式页脚.在此处查看:https://jsfiddle.net/fb6qdvrw/

要创建我使用的三角形,:before并:after像这样:

#footer .layer-4.bg-secondary:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 100%;
  border-top: 120px solid transparent;
  border-left: 120px solid #FFFFFF;
  width: 0;
}

#footer .layer-4.bg-secondary:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 0;
  left: 100%;
  border-top: 120px solid transparent;
  border-left: 120px solid #ffcf87;
  width: 0;
}

我想解决的问题是白线/边框厚度.我需要它对于对角线和水平线具有相同的厚度.在我的情况下,这可能吗？我看到我仅限于三角形和矩形,但我认为必须有一个解决方案.目前我的花哨的页脚因此而丑陋.

基于CSS的方法:

下面是一些基于CSS的纯方法来创建这个形状:

1 - 倾斜转型:

您可以使用CSS3 skew()转换创建此形状.

必填HTML:

我们需要的只是页脚内的2个元素,即:

  
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
CSS
CSS样式如何在一行中显示特定项目符号 
如何解决《CSS样式如何在一行中显示特定项目符号》经验，为你挑选了0个好方法。html,css,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开...
                [详细]
            赞
踩
CSS
CSS3 PIE  - 给IE边界半径支持不起作用？ 
如何解决《CSS3PIE-给IE边界半径支持不起作用？》经验，为你挑选了3个好方法。internet-explorer,css3,css,webkit,php,html,javascript,firebug,DevBox,在线流程图,编程,...
                [详细]
            赞
踩
CSS
如何使用CSS渐变和平面颜色制作背景？ 
如何解决《如何使用CSS渐变和平面颜色制作背景？》经验，为你挑选了2个好方法。gradient,css3,webkit,chrome,safari,css,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析...
                [详细]
            赞
踩
CSS
右边界渐变 
如何解决《右边界渐变》经验，为你挑选了1个好方法。html,css,css3,webkit,chrome,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开...
                [详细]
            赞
踩
CSS
强制图像适合并保持纵横比 
如何解决《强制图像适合并保持纵横比》经验，为你挑选了1个好方法。html,css,css3,容器,javascript,https,devbox,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生...
                [详细]
            赞
踩
CSS
css中resize属性有什么用 
resize属性的作用：指定一个元素是否是由用户调整大小的；若值为“none”则用户无法调整元素的尺寸，值为“both”则可调整元素的高度和宽度，值为“horizontal”则可调整元素的宽度，值为“vertical”则可调整元素的高度。c...
                [详细]
            赞
踩
CSS
CSS中的img上的box-shadow 
如何解决《CSS中的img上的box-shadow》经验，为你挑选了1个好方法。css,image,css3,webkit,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix...
                [详细]
            赞
踩
CSS
清洁方式将边框彼此相邻放置 - 产生1 px宽的边框 
如何解决《清洁方式将边框彼此相邻放置-产生1px宽的边框》经验，为你挑选了1个好方法。css,css3,容器,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开...
                [详细]
            赞
踩
CSS
css3动画如何停止 
在css中，可以使用animation-play-state属性控制动画的暂停，语法“animation-play-state:paused”；该属性在不同浏览器的兼容性不同，需加上对应前缀（如“-ms-”，“-webkit-”等）。css...
                [详细]
            赞
踩
CSS
Css3如何实现鼠标移上变长特效？（图文+视频） 
本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法。在前端页面设计中，css的功能是异常强大的，只要运用好它，你能实现很多网站各种精彩的动态效果。那么在之前的文章中也给大家分享介绍了一些用css实现动画效果的方法，比如【Css3动画...
                [详细]
            赞
踩
CSS
CSS  - 如何使用css为选择框设置外观 
如何解决《CSS-如何使用css为选择框设置外观》经验，为你挑选了1个好方法。css,css3,firefox,chrome,safari,https,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,j...
                [详细]
            赞
踩
CSS
输入字段从CSS3过渡中留下工件(在Chrome 15中) 
如何解决《输入字段从CSS3过渡中留下工件(在Chrome15中)》经验，为你挑选了1个好方法。css,google-chrome,css3,css-transitions,go,chrome,webkit,DevBox,在线流程图,编程,...
                [详细]
            赞
踩
CSS
用css3实现一个奥运五环 
css3实现奥运五环的方法：首先给5个div设置border-radius样式，制作五个圆环；然后使用position属性设置五个圆环的位置；最后使用z-index属性调整各环的层级关系即可。css3,奥运五环,css,windows,ht...
                [详细]
            赞
踩
CSS
Ckeditor:我怎样才能在ckeditor中制作像h3,h4,h5这样的标签 
如何解决《Ckeditor:我怎样才能在ckeditor中制作像h3,h4,h5这样的标签》经验，为你挑选了1个好方法。javascript,css,css3,ckeditor,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,...
                [详细]
            赞
踩
CSS
CSS 1px边框描边围绕边界半径 
如何解决《CSS1px边框描边围绕边界半径》经验，为你挑选了1个好方法。html,css,html5,css3,web,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开...
                [详细]
            赞
踩
CSS
ie对css3的支持吗 
IE8以下，几乎不兼容CSS3；IE8只支持非常小的一部分；IE9及以上版本开始支持css3，但像flex-box这类的都是不兼容的；IE11以后开始兼容像flex-box这类比较前沿的样式。ie,css3,css,windows,html...
                [详细]
            赞
踩
CSS
为什么背景附件:固定使背景大小:封面大小调整为窗口比例？ 
如何解决《为什么背景附件:固定使背景大小:封面大小调整为窗口比例？》经验，为你挑选了1个好方法。html,css,background-image,css3,webkit,bootstrap,DevBox,在线流程图,编程,编程问答,程序员...
                [详细]
            赞
踩
CSS
防止孩子继承转换css3 
如何解决《防止孩子继承转换css3》经验，为你挑选了0个好方法。css,css3,html,go,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,...
                [详细]
            赞
踩
CSS
像css3中的Angle Gradient一样的Photoshop 
如何解决《像css3中的AngleGradient一样的Photoshop》经验，为你挑选了1个好方法。css,background,css3,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解...
                [详细]
            赞
踩
CSS
如何用CSS3/Javascript设置"输入文件"的样式？ 
如何解决《如何用CSS3/Javascript设置"输入文件"的样式？》经验，为你挑选了4个好方法。html,javascript,file-io,jquery,css3,DevBox,在线流程图,编程,编程问答,程序员...
                [详细]
            赞
踩
相关标签