<分区>
javascript - 使用 CSS 的楼梯或台阶效果
在下图中，图像右侧的行具有一些特殊效果，即它们出现在不同的平原上
不确定这个的正确术语是什么，但看起来像楼梯。 那么我的问题是如何实现这种效果？
尝试使用 box-shadow 但无法实现
最佳答案
这里是您的起点:
<body>
<div id='stepContainer'>
<div class='step'>step 1</div>
<div class='step'>step 2</div>
<div class='step'>step 3</div>
<div class='step'>step 4</div>
</div>
</body>
并设置样式
<style>
#stepContainer {
width: 300px;
position: absolute;
right: 0;
top: 0;
background-color: white;
}
.step {
width: 100%;
height: 20px;
border-bottom: 12px solid rgba(0,0,0,0.5);
}
.step:nth-child(1) { height :100px; background-color: blue; margin-left: 20px;}
.step:nth-child(2) { height :100px; background-color: green; margin-left: 40px;}
.step:nth-child(3) { height :100px; background-color: aqua; margin-left: 50px;}
.step:nth-child(4) { height :100px; background-color: red; margin-left: 60px;}
</style>
关于javascript - 使用 CSS 的楼梯或台阶效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48399820/