Estou precisando fazer este detalhe no css:
O detalhe cinza, com este degrau.
A Pergunta é tem como fazer com css? Ou apenas com imagem ?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEstou precisando fazer este detalhe no css:
O detalhe cinza, com este degrau.
A Pergunta é tem como fazer com css? Ou apenas com imagem ?
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.
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>