Question 388895 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Connect circles with a dotted line

I have four rectangles and with a circle inside each one of those rectangles. I’m trying to connect those circles with a dotted line, but the line stops in the middle of the way I’m not sure why.
Also why is my first rectangle cut in half ?

Here is a codepen: https://codepen.io/onche-onche/pen/LYoZBex

and here is the code:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #e0e0e0;
}

.quatre-rectangles {
  width: 50%;
  position: relative;
}

.rectangle {
  height: 19em;
  margin: 1em 0;
  background-color: #fef1f2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 40px;
  padding: 1em;
  box-sizing: border-box;
}

.rectangle:first-child {
  margin-top: 400px;
}

.circle {
  width: 3em;
  height: 3em;
  background-color: #41be54;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5em;
  font-family: 'Lexend Deca', sans-serif;
  position: relative;
  z-index: 1;
  margin-top: 1em;
  align-self: center;
}

.rectangle:not(:last-child) .circle::after {
  content: "";
  position: absolute;
  bottom: -7em;
  left: 50%;
  width: 0;
  height: 8em;
  border-left: 4px dotted #41be54;
  transform: translateX(-50%);
  z-index: 0;
  opacity: 0.5;
}
<body>
  <div class="quatre-rectangles">
    <div class="rectangle">
      <div class="circle">1</div>
    </div>

    <div class="rectangle">
      <div class="circle">2</div>
    </div>

    <div class="rectangle">
      <div class="circle">3</div>
    </div>

    <div class="rectangle">
      <div class="circle">4</div>
    </div>
  </div>
</body>

I tried changing the height of this:

.rectangle:not(:last-child) .circle::after {

but I get some weird results

Tags:

2

Answers


  1. 0

    I’m trying to connect those circles with a dotted line, but the line stops in the middle of the way

    It’s because you hard coded the height of the dotted line, and the hard coded height does not match the correct distance between the circles. You can simply place it under the rectangle so that it can use the rectangle height instead.

    If you need to adjust the rectangle margins to be bigger than the circle, you could use custom properties for the adjusted margin.

    Also why is my first rectangle cut in half?

    As @A-Haword mentioned in the comment, it’s because of the viewport height is smaller than the total height of the contents but the content is centered. Either remove the height limit, add overflow, or remove the center (align-items).

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #e0e0e0;
}

.quatre-rectangles {
  width: 50%;
  position: relative;
}

.rectangle {
  height: 19em;
  --rectangle-margin: 1em;
  margin: var(--rectangle-margin) 0;
  background-color: #fef1f2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 40px;
  padding: 1em;
  box-sizing: border-box;
}


.rectangle:first-child {
  margin-top: 400px;
}

.circle {
  width: 3em;
  height: 3em;
  background-color: #41be54;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5em;
  font-family: 'Lexend Deca', sans-serif;
  position: relative;
  z-index: 2;
  margin-top: 1em;
  align-self: center;
}

.rectangle:not(:last-child)::before {
  content: "";
  position: absolute;
  /* bottom: -7em; */
  top: 50%;
  left: 50%;
  width: 0;
  height: calc(100% + var(--rectangle-margin));
  border-left: 4px dotted #41be54;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0.5;
}
    <div class="quatre-rectangles">
  <div class="rectangle">
    <div class="circle">1</div>
  </div>

  <div class="rectangle">
    <div class="circle">2</div>
  </div>

  <div class="rectangle">
    <div class="circle">3</div>
  </div>

  <div class="rectangle">
    <div class="circle">4</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Change the body’s height to a percentage instead of viewport height:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  background-color: #e0e0e0;
}

    and remove the margin-top on ".rectangle:first-child", it should fix your second issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search