1

Estou precisando fazer este detalhe no css:

inserir a descrição da imagem aqui

O detalhe cinza, com este degrau.

A Pergunta é tem como fazer com css? Ou apenas com imagem ?

2
  • dá pra fazer com um triangulo
    – haykou
    30/08/2017 às 1:19
  • Como ficaria ? Pode mostrar um exemplo de uma div que tenha aquele detalhe em algum dos lados ? se possivel nos 4 30/08/2017 às 1:25

2 Respostas 2

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>

Deixei o 'degrau' em vermelho. Assim você vê o truque que eu fiz. Mude a cor e está pronto.

4

Existem vários métodos de se fazer isso, acredito que esse seja o mais simples, utilizando um triangulo no final de cada linha para simular um degrau. Segue o código de exemplo com dois:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .