Step made with css

Navigation
1

I need to make this detail in css:

The gray detail with this step.

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

    
asked by anonymous 30.08.2017 / 03:18

2 answers

4

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 'rung' in red. So you see the trick I did. Change the color and it's ready.

    
30.08.2017 / 03:52
4

There are several methods to do this, I believe this is the simplest, using a triangle at the end of each line to simulate a step. Here is the sample 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>
    
30.08.2017 / 03:36
Is a URL important? Manipulating list of lists in Python