javascript - 求问这种面包屑用css如何实现, 如果用svg实现求自适应的思路(手机端)
本文介绍了javascript - 求问这种面包屑用css如何实现, 如果用svg实现求自适应的思路(手机端)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
css支持高版本浏览器即可
实现代码如下:
<section class="row-step">
<span>1.Add Address</span>
<span>2.Select Shipping Method</span>
<span>3.Pay</span>
</section>
$height: 1rem;
.row-step {
background: $background;
display: flex;
height: $height;
>span {
flex: 1 0 auto;
padding: $gutter;
position: relative;
&:not(:last-child) {
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
border-left: $gutter solid $lightest;
border-top: $height/2 solid transparent;
border-bottom: $height/2 solid transparent;
height: 0;
width: 0;
}
&:after {
content: '';
position: absolute;
top: 0;
right: 1px;
border-left: $gutter solid $background;
border-top: $height/2 solid transparent;
border-bottom: $height/2 solid transparent;
height: 0;
width: 0;
}
}
}
}
解决方案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>css面包屑</title>
<style type="text/css">
*{
margin:0px auto;
}
ul {
list-style-type:none;
}
#nav {
width:1000px;
height:40px;
background-color:#ccc;
margin:20px auto;
}
#nav li {
float:left;
height:40px;
width:180px;
font-weight:bold;
line-height:40px;
text-align:center;
position:relative;
z-index:5;
}
#nav li i {
width:0px;
height:0px;
line-height:0px;
border-width:28px 0px 28px 28px;
border-color:transparent transparent transparent #FFF;
border-style:dashed dashed dashed solid;
position:absolute;
top:-8px;
right:-28px;
z-index:5;
}
#nav li em {
width:0px;
height:0px;
line-height:0px;
border-width:20px 0px 20px 20px;
border-color:transparent transparent transparent #ccc;
border-style:dashed dashed dashed solid;
position:absolute;
top:0px;
right:-20px;
z-index:6;
}
#nav .current {
background-color:orange;
z-index:1;
color:#FFF;
}
#nav .current em {
border-color:transparent transparent transparent orange;
}
</style>
</head>
<body>
<div id = "nav">
<ul>
<li>我很快乐<i></i><em></em></li>
<li class = "current">我很快乐<i></i><em></em></li>
<li>我很快乐<i></i><em></em></li>
<li>我很快乐<i></i><em></em></li>
<li>我很快乐<i></i><em></em></li>
</ul>
</div>
</body>
</html>
效果图：
以上是我以前写的一个面包屑的css代码，主要原理就是：需要做两个小三角，一个是背景色，一个是边框色，然后利用定位重叠在一起，记住他们的定位要相差一个像素。
详细了解可以参考：三种纯CSS实现三角形的方法
补充：
也可以使用一些字体图标中的三角图标实现，很容易，比如Font Awesome 字体图标中的chevron-right图标。
这篇关于javascript - 求问这种面包屑用css如何实现, 如果用svg实现求自适应的思路(手机端)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
