CSS 的楼梯或台阶效果

Question

下图中右边的行有一些特殊效果i.e.they出现在不同的平原

不确定这个的正确术语是什么，但看起来像楼梯。所以我的问题是如何实现这个效果？

尝试使用 box-shadow 但无法实现

Answer 1

这里是您的起点：

<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>

CSS 的楼梯或台阶效果

Staircase or steps effect with CSS

javascript

css

z-index

css-transitions