Step made with css

Question

I need to do this detail in css:

The gray detail, with this step.

The question is, how do you do it with css? Or just with an image ?

Answer 1

There are several methods of doing this, I believe that this is the simplest, using a triangle at the end of each line to simulate a step. Follow the example code with two:

.chao1{
  width:50%;
  height:20px;
  background:#cecece;
  float:left;
}
.degrau1{
  float:left;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 0 40px;
  border-color: transparent transparent transparent #cecece;
}
.chao2{
  width:90%;
  height:20px;
  background:#cecece;
  float:left;
}
.degrau2{
  float:left;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 0 40px;
  border-color: transparent transparent transparent #cecece;
}

<div class="chao1"></div>
<div class="degrau1"></div>
<div class="chao2"></div>
<div class="degrau2"></div>

Answer 2

div{
  font-size: 0;
  display: inline-block;
}

.ground{
  padding: 0;
  margin: 0;
  width: 40%;
  height: 20px;
  background-color: #000;
  position: relative;
  vertical-align: bottom;
}


.footer{
  width: 60%;
  height: 40px;
  background-color: #000;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  margin: 0;
}

.footer::before{
    content: "";
    position: absolute;
    right: -14px;
    background-color: #F00;
    width: 26px;
    height: 20px;
    top: 8px;
    transform: rotateZ(50deg);
  }

<div class="footer"> A </div><!--
--><div class="ground"> B </div>

I left the 'step' in red. So you see the trick I did. Change the color and you’re ready.