手把手教你做'面包屑'导航栏(进阶篇)

作者:jcmp      发布时间:2021-04-15      浏览量:0
今天我们继续来写面包屑导航栏,之前的教程

今天我们继续来写面包屑导航栏,之前的教程:

手把手教你做'面包屑'导航栏

已经做出了一个基本的可以满足大部分需求的样式了,但是最后还留下一个问题,那就是:

如果我们要实现没有背景的带边框的样式该怎么做呢?今天的教程就是来实现边框的样式.

这种 border 无内容的样式是无法实现边框的,这点可以确定,所以这也就局限了为什么之前一篇教程中我会在最后提出这个问题,那么我们该用什么方法来实现呢?方法总是有的.

首先,还是那个套路:

我们以此为基础,然后我们要做出五个长方形:

看效果:

恩,带边框的基本样式出来了.然后!重点来了,我们要思考怎么做出箭头的形状,用 border 肯定是行不通的,所以我们得想其他方法.这里我们来看一个小例子:

看到这张图相信很多人已经想到了,我们只需要一个正方形,把它旋转45度,再选择合适的长度拼接上去就可以实现右边的箭头了,当然,左边的凹陷也是可以做的.

这样是不是带边框的就出来了呢? 其实跟上一篇教程并没有很大区别,但是你要能想到这个方法,才能做出这样的效果.其他的效果在上一篇文章中已经有具体讲解,这里就直接贴代码了。

最后的效果就是这样的: