用連接線響應繪制動態圓圈
[英]Draw dynamic Circle with connected line responsive
問題描述
我想創建一個連接線響應式設計的圓圈
當我調整屏幕大小時
但我的期望是這樣的任何人都可以幫助我嗎？
這是我的代碼 HTML 和 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>
它的動態數據使用 angular。例如
<ul>
<li *ngFor="let a of listOfCircle"> {{a.code}} </li>
</ul>
1 個解決方案
解決方案1
1 已采納 2022-02-08 11:19:02
如果你知道你想要什么斷點（即你想要在什么寬度下有多少列）這可以在純 CSS 中完成。
這個片段有兩組。 第一個用於寬度 >600px，第二個用於寬度 <=600px，第一組每行 10 列，第二組每行 5 列。
它使用網格並使用 CSS nth-child 工具反轉交替行占用的列的順序。
<,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>
注意：此答案建立在Draw Circle with connected line responsive問題的答案之上並部分概括了該問題的答案，該問題具有更具體的條件，即限制條件。
在瀏覽器中繪制動態圓圈的最佳方法是什么（除了Flash）
[英]What is the best way to draw dynamic circle in browser (apart from flash)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.