这里总共有四种面包屑效果，其中第一种运用:before和:after，运用border生成同等大小的尖角，叠加起来左右错动1px；第二个还是运用:before和:after，运用border生成不同的尖角，一个在左一个在右；第三个是运用一个:after生成一个正方形，设置border-radius然后rotate旋转45度；第四个直接运用水平扭曲就skewX就可以了。

Breadcrumbs（面包屑），在网站上也是常见的一种UI效果，但这种效果大家看到的都是很普通普通的效果，使用CSS3制作的一些特殊效果，可能很少见吧。虽然早前在《CSS 制作Breadcrumbs》一文中搜集和制作了一些效果，但这些效果都没有运用动画效果。今天这个案例使用CSS3的几个属性制作了一个带有动画的Breadcrumbs效果，感兴趣的可以看看。

面包屑是Web中常见的一个元件，早前在《CSS3制作Breadcrumbs》和案例《css3面包屑设计》使用CSS3制作了各式各样的面包屑效果，今天@逆天使用上原始的CSS配合一定的标签制作了一款兼容多浏览器的面包屑案例，感兴趣的可以看看：