Tenho ícones, separados em divs, e o layout original tem estes pontinhos. Tentei utilizar imagens, mas desconfigura meu layout.
Como colocar estes pontos entre as imagens?
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 comunidadeTenho ícones, separados em divs, e o layout original tem estes pontinhos. Tentei utilizar imagens, mas desconfigura meu layout.
Como colocar estes pontos entre as imagens?
Uma alternativa é usar o border style dotted
e ir intercalando a cada imagem, também é necessário um container para centralizar os elementos, exemplo...
.containerImgs {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.pontilhado{
border-left-style: dotted;
border-left-width: 4px;
border-left-color:#53fd34;
height: 70px;
width: 0px;
}
<div class="containerImgs">
<img src="https://fakeimg.pl/100/">
<div class="pontilhado"></div>
<img src="https://fakeimg.pl/100/">
<div class="pontilhado"></div>
<img src="https://fakeimg.pl/100/">
</div>
Referências Border Style
Uma outra forma de implementar é utilizar o elemento hr
verticalmente através de uma classe.
.container {
text-align: center;
}
.vertical-dotted-hr {
margin-top: 20px;
margin-bottom: 20px;
width: 100px;
transform: rotate(90deg);
border: none;
border-top: 5px dotted;
color: rgb(244, 128, 36);
}
img {
width: 30%;
}
<div class="container">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded"/>
<hr class="vertical-dotted-hr" />
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded"/>
</div>