How to fill the horizontal space between two divs using dotted/dashed line using CSS

Question

I tried to do so but I am not able to change the gap between the dashes. Also, the size of the circles and the dashed lines is not changing according to the screen size.

This is what I have done till now: see the gap difference between the dashes

Here's the code:

      <div id="getStarted" className={styles.getStarted}>
    <h3>How to get started?</h3>
    <div className={styles.Icons}>
      <div className={styles.circle}>
      
      </div>
      <div className={styles.dash}></div>
      <div className={styles.circle}>
      
      </div>
       <div className={styles.dash}></div>
       <div className={styles.circle}>
      
      </div>
    </div>
  </div>

Here's the css styling:

    .getStarted {
  justify-content: center;
  align-items: center;
  text-align: center;

  h3 {
    color: #006ebe;
    font-size: 2.3vw;
    margin-bottom: 100px;
  }

  .Icons {
      gap: 2vw;
    display: flex;
    justify-content: center;

.circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: #0093ff;
  border: 3px solid #0093ff;
  color: white;
  text-align: center;
  font: 20px Poppins, sans-serif;
  font-weight: 600;
  line-height: 22px;
}
    .dash {
      
      width: 10%;
      border-top: 4px dotted #006ebe;
      margin-top: 20px;
      transform: rotate(-0.07deg);
    }
  }
}

Simon · Accepted Answer · 2022-02-15T11:49:54.360

1

Your template looks very suspiciously like svg lines that use stroke-dasharray and round strike-linecap

.getStarted {
  justify-content: center;
  align-items: center;
  text-align: center;
}
h3 {
  color: #006ebe;
  font-size: 2.3vw;
  margin-bottom: 100px;
}

.Icons {
  gap: 2vw;
  display: flex;
  justify-content: center;
}

.circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: #0093ff;
  border: 3px solid #0093ff;
  color: white;
  text-align: center;
  font: 20px Poppins, sans-serif;
  font-weight: 600;
  line-height: 22px;
}

.dash {
  width: 10%;
  transform: rotate(-0.07deg);
}
.dash line {
  stroke: #0093ff;
  stroke-dasharray: 0.5 3.2;
  stroke-linecap: round;
}

<div id="getStarted" class="getStarted">
  <h3>How to get started?</h3>
  <div class="Icons">
    <div class="circle">

    </div>
    <svg class="dash" viewBox="-10 -5 20 10"><line x1="-9" x2="9"></line></svg>
    <div class="circle">

    </div>
     <svg class="dash" viewBox="-10 -5 20 10"><line x1="-9" x2="9"></line></svg>
     <div class="circle">

    </div>
  </div>
</div>

edited Feb 15 '22 at 11:49

answered Feb 15 '22 at 10:59

Simon

1,172
12
21

If you want fully round dots maybe try to embed the svg as a background image similar to how this tool does it: https://kovart.github.io/dashed-border-generator/ (but offset cy to become fully rendered) (with the rect the best I ended up with is `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect y='5%25' x='5%25' width='90%25' height='90%25' fill='none' stroke='black' stroke-width='18' stroke-dasharray='0.1%2c40' stroke-dashoffset='4' stroke-linecap='round'/%3e%3c/svg%3e")`) – Simon Feb 15 '22 at 12:29
Thank you so much, the above svg solution worked for me. – Shivam Sharma Feb 16 '22 at 06:22
Though it solves the problem but can you suggest me how to increase the number of dots with the increasing width? Currently, when the screen size is increasing the width of the line increases but the number of dots remain the same so it creates a lot of blank space between the circles and the line – Shivam Sharma Feb 16 '22 at 06:55
It seems that you can get both (responsive dots and controlled dot spacing) only be using some javascript. (e.g. to change line width in the svg) – Simon Feb 16 '22 at 14:50
I changed the x1 and x2 values and it worked. – Shivam Sharma Feb 17 '22 at 15:03

Cédric FOURT · Answer 2 · 2022-02-15T18:40:18.770

You can change your CSS.

CSS Example:

.getStarted {
  justify-content: center;
  align-items: center;
  text-align: center;
}

  h3 {
    color: #006ebe;
    font-size: 2.3vw;
    margin-bottom: 100px;
  }

  .Icons {
    display: flex;
    justify-content: center;
  }

.circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: #0093ff;
  border: 3px solid #0093ff;
  color: white;
  text-align: center;
  font: 20px Poppins, sans-serif;
  font-weight: 600;
  line-height: 22px;
  margin-left: 6px;
  margin-right: 6px;
}
    .dash {
      
  width: 20%;
  border-top: 4px dotted #006ebe;
    margin: 20px 2px 0 2px;
  transform: rotate(-0.07deg);
    }

HTML

      <div id="getStarted" className={styles.getStarted}>
    <h3>How to get started?</h3>
    <div className={styles.Icons}>
      <div className={styles.circle}>
      
      </div>
      <div className={styles.dash}></div>
      <div className={styles.circle}>
      
      </div>
       <div className={styles.dash}></div>
       <div className={styles.circle}>
      
      </div>
    </div>
  </div>

.getStarted {
  justify-content: center;
  align-items: center;
  text-align: center;
}

  h3 {
    color: #006ebe;
    font-size: 2.3vw;
    margin-bottom: 100px;
  }

  .Icons {
    display: flex;
    justify-content: center;
  }

.circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: #0093ff;
  border: 3px solid #0093ff;
  color: white;
  text-align: center;
  font: 20px Poppins, sans-serif;
  font-weight: 600;
  line-height: 22px;
  margin-left: 6px;
  margin-right: 6px;
}
    .dash {
      
  width: 20%;
  border-top: 4px dotted #006ebe;
    margin: 20px 2px 0 2px;
  transform: rotate(-0.07deg);
    }

<div class="getStarted" id="getStarted">
<h3>How to get started?</h3>

<div class="Icons">
<div class="circle"></div>

<div class="dash"></div>

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

<div class="dash"></div>

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

score 0 · Answer 3 · answered Feb 15 '22 at 12:08

by using this answer How to increase space between dotted border dots and change the background-size property you can change the gap between dashes . and by using vw unit you can to change dashes with page resizing.

.getStarted {
  justify-content: center;
  align-items: center;
  text-align: center;
}
h3 {
  color: #006ebe;
  font-size: 2.3vw;
  margin-bottom: 100px;
}

.Icons {
  gap: 2vw;
  display: flex;
  justify-content: center;
}
.circle {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 10px;
  background: #0093ff;
  border: 3px solid #0093ff;
  color: white;
  text-align: center;
  font: 20px Poppins, sans-serif;
  font-weight: 600;
  line-height: 22px;
}
.dash {
  width: 10%;
  background-image: linear-gradient(
    to right,
    #0093ff 35%,
    rgba(255, 255, 255, 0) 0%
  );
  background-position: center;
  background-size: 1.6vw 0.6vw;
  background-repeat: repeat-x;
}

<div id="getStarted" class='getStarted'>
  <h3>How to get started?</h3>
  <div class='Icons'>
      <div class=' circle'>

  </div>
  <div class='dash'></div>
  <div class='circle'>

  </div>
  <div class='dash'></div>
  <div class='circle'>

  </div>
</div>
</div>

How to fill the horizontal space between two divs using dotted/dashed line using CSS

3 Answers3