Question

在下图中，图像右侧的行有一些特殊效果，即它们出现在不同的平原上

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

尝试使用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的楼梯或步骤效果

1 个答案: