How to draw dots between one image and another with HTML5 and CSS3?

Navigation
1

I have icons, separated in divs, and the original layout has these dots. I tried using images, but it misconfigures my layout.

How do you put these points between images?

    
asked by anonymous 22.11.2017 / 12:18

2 answers

2

An alternative is to use border style dotted and to intersperse each image, you also need a container to centralize the elements, for example ... 

.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/"><divclass="pontilhado"></div>

  <img src="https://fakeimg.pl/100/"><divclass="pontilhado"></div> 

  <img src="https://fakeimg.pl/100/"></div>

References Border Style

Flexbox full guide

    
22.11.2017 / 12:32
1

Another way to implement is to use the hr element vertically through a class. 

.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"/><hrclass="vertical-dotted-hr" />
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded"/>

</div>
    
22.11.2017 / 12:37
Save after hiding a div Query with join