半六边形形状的透视阴影（如旗帜）答案

【问题标题】：Perspective shadows from semi-hexagonal shapes (like flags)半六边形形状的透视阴影（如旗帜）
【发布时间】：2015-12-30 21:42:32
【问题描述】：

目标设计如下所示：

我的标记和 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 似乎无法正常工作，因为它无法实现楔形透视阴影。所以，我想它可能适用于一些边框属性。

【问题讨论】：

标签： html css material-design shadow perspective

【解决方案1】：

我想我找到了解决方案。这可以通过再次创建相同的元素并使用 z 索引层将克隆放置在它们下方来实现，然后对这些阴影颜色的形状应用一些变换以使它们看起来好像是透视阴影。

写完代码后，我将稍后编辑这篇文章以添加解决方案以供参考。

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

【讨论】：