透視陰影

Question

有針對性的設計是這樣的：

我的標記和CSS可以看出在此的jsfiddle：http://jsfiddle.net/n2bynh57/

HTML：

<div id="steps"> 
       <ol class="para-small-color"> 
        <span class="wedge"></span> 
        <li> 
         <div class="counter">1</div> 
         <div class="list-elem"> 
         </div> 
        </li> 
        <li> 
         <div class="counter">2</div> 
         <div class="list-elem"> 
         </div> 
        </li>     
        <span class="wedge"></span> 
        <li> 
         <div class="counter">3</div> 
         <div class="list-elem"> 
         </div> 
        </li>     
        <li> 
         <div class="counter">4</div> 
         <div class="list-elem"> 
         </div> 
        </li>     
       </ol> 
</div> 

CSS：

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#steps ol, #steps ul{ 
    -padding-start: 0px; 
    -webkit-padding-start: 0px; 
} 
#steps ol>li:nth-child(2), #steps ol>li:nth-child(5) { 
    background-color: #e9e9e9; 
} 
#steps ol>li:nth-child(3), #steps ol>li:nth-child(6) { 
    margin-left: 5.6rem; 
} 
#steps ol>li, #steps ol>li ul li{ 
    list-style: none; 
} 
#steps ol>li{ 
    display: flex; 
    margin-left: 1.4rem; 
} 

.list-elem{ 
    margin-left: 2rem; 
} 
.counter{ 
    font: 400 4rem Arial; 
    padding: 10px 25px 10px 25px; 
    color: #a83443; 
} 
.wedge { 
    position: absolute; 
    display: inline-block; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 0 25px 8px 0; 
    border-color: transparent #b0b0b0 transparent transparent; 
} 
#steps ol li:nth-of-type(1)>.counter, #steps ol li:nth-of-type(3)>.counter { 
    width: 100px; 
    height: 100px; 
    background: #E9E9E9; 
    position: relative; 
    text-align: center; 
} 

#steps ol li:nth-of-type(1)>.counter:after, #steps ol li:nth-of-type(3)>.counter:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid #E9E9E9; 
} 

我設法得到半正六邊形的形狀和角落平坦的陰影。但我不確定如何製作透視平坦的陰影。使用box-shadow似乎並不正確，因爲它無法實現楔形透視陰影。所以，我認爲它可能與一些邊界屬性一起工作。

Answer 1

我想我找到了解決方案。這可以通過再次創建相同的元素並使用z索引圖層將克隆放置在它們下面來實現，然後對這些陰影色圖形應用一些變換使它們看起來好像是透視陰影。

稍後我將編輯此文章，以便在完成編寫代碼後添加供參考的解決方案。

解決方案：http://codepen.io/ciprianf/pen/epvvep