Breadcrump with css

Question

在这fiddle我创建了一个简单的面包屑。我喜欢改变类“div.arrow-right”的依赖关系。我喜欢用“#sequence”来控制箭头大小。这样箭头的大小就属于字体大小。这意味着如果我更改字体大小，右箭头应自动适应与包含书写的div相同的高度。

#sequence { 
    font-size: 28px; 
} 

而且我喜欢在两个面包屑元素之间添加一个间隙或者说一个白色细箭头，请参阅下面的图片。

Answer 1

使用:before和:after伪构件的替代。 Fiddle

.breadcrumb { 
 
    list-style: none; 
 
    overflow: hidden; 
 
    font-size: 28px; 
 
} 
 
.breadcrumb li { 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 8px 0 8px 50px; 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
.breadcrumb li:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid transparent; 
 
    border-bottom: 50px solid transparent; 
 
    border-left: 30px solid #74c476; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -50px; 
 
    left: 100%; 
 
    z-index: 2; 
 
} 
 
.breadcrumb li:before { 
 
    content: " "; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 50px solid transparent; 
 
    border-bottom: 50px solid transparent; 
 
    border-left: 30px solid white; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -50px; 
 
    margin-left: 2px; 
 
    left: 100%; 
 
    z-index: 1; 
 
} 
 
li:nth-child(1) { 
 
    padding-left: 20px; 
 
    background-color: #74c476; 
 
} 
 
li:nth-child(2) { 
 
    background-color: #61a362; 
 
} 
 
li:nth-child(3) { 
 
    background-color: #518851; 
 
} 
 
li:nth-child(1):after { 
 
    border-left-color: #74c476; 
 
} 
 
li:nth-child(2):after { 
 
    border-left-color: #61a362; 
 
} 
 
li:nth-child(3):after { 
 
    border-left-color: #518851; 
 
}

<ul class="breadcrumb"> 
 
    <li>hello</li> 
 
    <li>operator</li> 
 
    <li>layout</li> 
 
</ul>