如何正確使用CSS邊框來形象化價值鏈？

Question

我試圖創建一個基於CSS的價值鏈看一個樣：

做了一些研究之後，我可以找出來，我應該用僞元素。所以我設法添加它們，但我不能讓它們彼此重疊。

（不介意的顏色，我使用他們開發的目的。）

li { 
 
    display: inline-block; 
 
    background: #c3c3c3; 
 
    width: 70px; 
 
    padding: 13px 0 10px; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
} 
 
.chain-link { 
 
    position: relative; 
 
} 
 
.chain-link:after, 
 
.chain-link:before { 
 
    left: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.chain-link:after { 
 
    border-color: rgba(0, 0, 0, 0); 
 
    border-left-color: black; 
 
    border-width: 20px; 
 
    margin-left: 35px; 
 
} 
 
.chain-link:before { 
 
    border-color: rgba(0, 0, 0, 0); 
 
    border-left-color: white; 
 
    border-width: 20px; 
 
    margin-left: -35px; 
 
} 
 
.chain-link:first-child:before { 
 
    border-left-color: red; 
 
} 
 
.chain-link:last-child:after { 
 
    border-left-color: yellow; 
 
}

<ul> 
 
    <li class="chain-link">10</li> 
 
    <li class="chain-link">20</li> 
 
    <li class="chain-link">30</li> 
 
    <li class="chain-link">40</li> 
 
</ul>

誰能幫助？任何幫助讚賞。

Answer 1

演示 - http://jsfiddle.net/7t9ruxgr/

li { 
 
    display: inline-block; 
 
    background: #c3c3c3; 
 
    width: 70px; 
 
    padding: 13px 0 10px; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
} 
 
.chain-link { 
 
    position: relative; 
 
} 
 
.chain-link:after, 
 
.chain-link:before { 
 
    left: 50%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.chain-link:after { 
 
    border-color: transparent transparent transparent #c3c3c3; 
 
    margin-left: 35px; 
 
    border-width: 20px 16px 21px 20px; 
 
    margin-left: 35px; 
 
    z-index: 2; 
 
} 
 
.chain-link:before { 
 
    border-color: rgba(0, 0, 0, 0); 
 
    border-left-color: white; 
 
    border-width: 20px; 
 
    margin-left: -35px; 
 
}

<ul> 
 
    <li class="chain-link">10</li> 
 
    <li class="chain-link">20</li> 
 
    <li class="chain-link">30</li> 
 
    <li class="chain-link">40</li> 
 
</ul>