求问这种面包屑用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;
            }
        }
    }
}

阅读 2.3k

 <!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>

效果图：
20131008143500750

以上是我以前写的一个面包屑的css代码，主要原理就是：需要做两个小三角，一个是背景色，一个是边框色，然后利用定位重叠在一起，记住他们的定位要相差一个像素。
详细了解可以参考：三种纯CSS实现三角形的方法

补充：
也可以使用一些字体图标中的三角图标实现，很容易，比如Font Awesome 字体图标中的chevron-right图标。

求问这种面包屑用css如何实现, 如果用svg实现求自适应的思路(手机端)

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？