'Draw Circle with connected line responsive

i wanted to create a circle with connected Line responsive design

enter image description here

when i resize the screen

enter image description here

But my expectation would be like this can anyone help me?

enter image description here

here is my code of HTML and CSS:

<html>
<style>
li {
  width: 4em;
  height: 4em;
  text-align: center;
  line-height: 4em;
  border-radius: 3em;
  background: #1F3864;
  margin: 0 2em;
  display: inline-block;
  color: white;
  position: relative;
  margin-bottom: 2rem;
}

li::before{
  content: "";
  position: absolute;
  top: 2em;
  left: -4em;
  width: 4em;
  height: 0.2em;
  background: #1F3864;
  z-index: -1;
}
li:first-child::before {
  display: none;
}
</style>
<ul>
  <li> M1 </li>
  <li> M2 </li>
  <li> M3 </li>
  <li> M4 </li>
  <li> M5 </li>
  <li> M6 </li>
  <li> M7 </li>
  <li> M8 </li>
  <li> M9 </li>
  <li> M10 </li>
  <li> M11 </li>
</ul>
</html>

forget to inform one thing its dynamic data. for Example <li *ngFor="let a of array">

javascripthtmlcssangular


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions