Question

目标设计如下所示：

a busy cat

我的标记和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索引图层将克隆放置在它们下面来实现，然后对这些阴影颜色的形状应用一些变换，使它们看起来好像是透视阴影。

我将在稍后编辑此帖子，以便在我完成代码编写后添加解决方案以供参考。

解决方案：

半六角形状的透视阴影（如旗帜）

1 个答案: