网页制作实用教程,用CSS创建扁平化面包屑导航(2)
这一段原始代码使得列表每项呈现为蓝色矩形。文本放置在中央,每一边都有间隔和相同的内边距。添加 position:relative; 使得那些绝对定位的元素能够相对这一父元素显示。
第三步
1 2 3 4 5 6 7 #crumbs ul li a:after { content:""; border-top:40pxsolid red; border-bottom:40pxsolid red; border-left:40pxsolid blue; position:absolute;right:-40px;top:0; }
现在我们来用CSS创建原本只能用背景图片才能实现的雪佛龙样式。使用 :after 选择器创建一个额外的元素,通过各种CSS边框属性形成一个三角形。在demo中,你能够看到通过应用边框属性中的top和bottom交叉重叠实现一个单独的蓝色三角形。他们现在被标记为红色用作示范,但只要将这些改成tansparent(透明)就能够输出一个蓝色三角形。通过绝对定位这些效果就能够很好实现。
第四步
1 2 3 border-top:40pxsolid transparent; border-bottom:40pxsolid transparent; border-left:40pxsolid#3498db;
使用正确的颜色我们得到了我们想要的形状,面包屑链接实现了流行的雪佛龙形状!!
第五步
1 2 3 4 5 6 7 #crumbs ul li a:before { content:""; border-top:40pxsolid transparent; border-bottom:40pxsolid transparent; border-left:40pxsolid#d4f2ff; position:absolute;left:0;top:0; }