纯 CSS 实现面包屑导航

最新推荐文章于 2023-04-20 15:22:56 发布

风动之石

最新推荐文章于 2023-04-20 15:22:56 发布

阅读量802

点赞数

分类专栏： CSS 专题文章标签：面包屑导航纯CSS

本文链接：https://blog.csdn.net/cxl444905143/article/details/43088863

版权

CSS 专题专栏收录该内容

13 篇文章 0 订阅

订阅专栏

参考文档：

中文：http://www.cnblogs.com/submerge/archive/2014/10/22/4044341.html

英文原文：http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css

先上图，随后代码。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.breadcrumbs li {
			float: left;
			position: relative;
			list-style-type: none;
		}
		.breadcrumbs a {
			position: relative;
			display: block;
			height: 40px;
			line-height: 40px;
			text-decoration: none;
			text-align: center;
			padding: 0 40px 0 60px;
			background-color: #3498db;
			margin-right: 10px;
		}
		.breadcrumbs a:after {
			content: "";
			position: absolute;
			border-top: 20px solid transparent;
			border-bottom: 20px solid transparent;
			border-left: 20px solid #3498db;
			right: -20px;
			top: 0;
			z-index: 1;
		}
		.breadcrumbs a:before {
			content: "";
			position: absolute;
			border-top: 20px solid transparent;
			border-bottom: 20px solid transparent;
			border-left: 20px solid #FFF;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body>
	<ul class="breadcrumbs">
		<li><a href="">one</a></li>
		<li><a href="">one</a></li>
		<li><a href="">two</a></li>
		<li><a href="">three</a></li>
		<li><a href="">four</a></li>
		<li><a href="">five</a></li>
	</ul>
</body>
</html>

要想最左边是平整的，即没有三角形，可以将第一个 li a:before 设置不可见。

.breadcrumbs li:first-child a:before {
	display: none;
}

效果图：

风动之石

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录