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

Asked

Viewed 57 times

1

I have icons, separated in Divs, and the original layout has these dots. I tried to use images, but disfigure my layout.

inserir a descrição da imagem aqui

How to place these dots between images?

html css html5 css3
  • 1

    Use an image that is a point and repeat it vertically as background in a div in the middle of these images.

2 answers

2


An alternative is to use the border style dotted and interleaving each image, it is also necessary a container to centralize the elements, 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/">
  <div class="pontilhado"></div>

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

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

</div>

References Border Style

Flexbox full guide

  • worked out! Thank you!

1

Another way to implement is to use the element hr vertically across 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"/>
  <hr class="vertical-dotted-hr" />
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded"/>

</div>

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.