Issue
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>its dynamic data using angular. for Example
<ul>
<li *ngFor="let a of listOfCircle"> {{a.code}} </li>
</ul>
Solution
If you know what break points you want (ie at what width you want to have what number of columns) this can be done in pure CSS.
This snippet has two sets. The first is for widths >600px and the second for widths <=600px with 10 columns per row in the first set and 5 columns per row in the second set.
It uses a grid and reverses the order of columns occupied by alternate rows using the CSS nth-child facility.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
}
.container {
display: flex;
justify-content: center;
width: 90vw;
margin: 0 auto;
}
.circles {
width: 100%;
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
--gap: 4vw;
gap: var(--gap);
grid-auto-flow: dense;
}
.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%;
}
@media (min-width: 600px) {
.circles {
--cols: 10;
}
.circles>*:nth-child(20n-10)::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
height: var(--gap);
width: 1px;
}
.circles>*:nth-child(20n-9) {
grid-column: 10;
}
.circles>*:nth-child(20n-9)::after {
display: none;
}
.circles>*:nth-child(20n-8) {
grid-column: 9;
}
.circles>*:nth-child(20n-7) {
grid-column: 8;
}
.circles>*:nth-child(20n-6) {
grid-column: 7;
}
.circles>*:nth-child(20n-5) {
grid-column: 6;
}
.circles>*:nth-child(20n-4) {
grid-column: 5;
}
.circles>*:nth-child(20n-3) {
grid-column: 4;
}
.circles>*:nth-child(20n-2) {
grid-column: 3;
}
.circles>*:nth-child(20n-1) {
grid-column: 2;
}
.circles>*:nth-child(20n) {
grid-column: 1;
}
.circles>*:nth-child(20n-8):last-child::after,
.circles>*:nth-child(20n-7):last-child::after,
.circles>*:nth-child(20n-6):last-child::after,
.circles>*:nth-child(20n-5):last-child::after,
.circles>*:nth-child(20n-4):last-child::after,
.circles>*:nth-child(20n-3):last-child::after,
.circles>*:nth-child(20n-2):last-child::after,
.circles>*:nth-child(20n-1):last-child::after,
.circles>*:nth-child(20n):last-child::after {
display: inline-block;
}
.circles>*:nth-child(20n+1)::before {
display: inline-block;
left: 50%;
transform: translate(-50%, -100%);
width: 1px;
height: var(--gap);
top: 0;
content: '';
position: absolute;
background-color: navy;
}
}
@media (max-width: 600px) {
.circles {
--cols: 5;
}
.circles>*:nth-child(10n-5)::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
height: var(--gap);
width: 1px;
}
.circles>*:nth-child(10n-4) {
grid-column: 5;
}
.circles>*:nth-child(10n-4)::after {
display: none;
}
.circles>*:nth-child(10n-3) {
grid-column: 4;
}
.circles>*:nth-child(10n-2) {
grid-column: 3;
}
.circles>*:nth-child(10n-1) {
grid-column: 2;
}
.circles>*:nth-child(10n) {
grid-column: 1;
}
.circles>*:nth-child(10n-3):last-child::after,
.circles>*:nth-child(10n-2):last-child::after,
.circles>*:nth-child(10n-1):last-child::after,
.circles>*:nth-child(10n):last-child::after {
display: inline-block;
}
.circles>*:nth-child(10n+1)::before {
display: inline-block;
left: 50%;
transform: translate(-50%, -100%);
width: 1px;
height: var(--gap);
top: 0;
content: '';
position: absolute;
background-color: navy;
}
}
.circles>*:first-child::before,
.circles>*:last-child::after {
display: none;
}
</style>
</head>
<body>
<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>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
</div>
</body>
</html>Note: this answer builds on and partly generalises the answer to the question at Draw Circle with connected line responsive which had more specific, i.e. limiting, conditions.
Answered By - A Haworth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.