0
248
ViewsDraw Circle with connected line responsive
i wanted to create a circle with connected Line responsive design
when i resize the screen
But my expectation would be like this can anyone help me?
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">
1 answers
Answer question0
You can use grid to change the positioning of elements without having to change the HTML.
This snippet takes the basic idea from the code in the question of using a pseudo element to draw a line to the next element.
With a media query it changes the grid layout to have fewer items in a row and 'swivels' this line round for some edge elements.
Of course you will want to alter the dimensions of things and the media break points to suit your particular use case. This snippet breaks at 600px width and uses vw as the unit so that things are responsive.
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
width: 90vw;
margin: 0 auto;
}
.circles {
width: 100%;
display: grid;
--cols: 11;
grid-template-columns: repeat(var(--cols), 1fr);
--gap: 4vw;
gap: var(--gap);
}
.circles>* {
width: 100%;
background-color: navy;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1 / 1;
display inline-block;
position: relative;
}
.circles>*::after {
content: '';
position: absolute;
width: var(--gap);
height: 1px;
background-color: navy;
top: 50%;
transform: translateY(-50%);
left: 100%;
}
.circles>*:last-child::after {
display: none;
}
@media (max-width: 600px) {
.circles {
--cols: 5;
}
.circles>*:nth-child(5)::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
height: var(--gap);
width: 1px;
}
.circles>*:nth-child(6) {
grid-column: 5;
grid-row: 2;
}
.circles>*:nth-child(6)::after {
display: none;
}
.circles>*:nth-child(7) {
grid-column: 4;
grid-row: 2;
}
.circles>*:nth-child(8) {
grid-column: 3;
grid-row: 2;
}
.circles>*:nth-child(9) {
grid-column: 2;
grid-row: 2;
}
.circles>*:nth-child(10) {
grid-column: 1;
grid-row: 2;
}
.circles>*:nth-child(11)::after {
display: inline-block;
left: 50%;
transform: translate(-50%, -100%);
width: 1px;
height: var(--gap);
top: 0;
}
}<div class="container">
<ul class="circles">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</div>This is just to give the idea. Obviously more would need to be included to account for a different number of circles.