1

Tenho ícones, separados em divs, e o layout original tem estes pontinhos. Tentei utilizar imagens, mas desconfigura meu layout.

inserir a descrição da imagem aqui

Como colocar estes pontos entre as imagens?

1
  • 1
    Usa uma imagem que é um ponto e repete ela verticalmente como background em uma div no meio dessas imagens. 22/11/2017 às 11:20

2 Respostas 2

2

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

Flexbox guia completo

1
  • deu certo! Obrigado!
    – Ramos
    22/11/2017 às 12:18
1

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>

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 .