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