自定義CSS行連接多個div /進度條

我想要創建連接3個div的圓形線條，如下圖所示。我嘗試使用CSS邊框半徑，但不知道如何讓它們看起來像下面的圖像連接。自定義CSS行連接多個div /進度條

<div class="progress bar"> 29</div> 

<div class="box"></div> 

<div class="progress bar"> 28</div> 

.box{ 
    width:500px; height:100px; 
    border:solid 5px #000; 
    border-color:#000 transparent transparent transparent; 
    border-radius: 50%/100px 100px 0 0; 
}

來源

2017-10-17 condo1234

您可以嘗試僞元素是這樣的：

.progress { 
 
    position:relative; 
 
    margin:50px; 
 
    padding:5px; 
 
    border:5px solid blue; 
 
    width:20px; 
 
    border-radius:50%; 
 
    text-align:center; 
 
    background: #fff; 
 
} 
 
.right:after { 
 
    content: " "; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    top: 15px; 
 
    right: -38px; 
 
    height: 80px; 
 
    width: 80px; 
 
    border-right: 5px solid blue; 
 
} 
 
.left:after { 
 
    content: " "; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    top: 15px; 
 
    left: -38px; 
 
    height: 80px; 
 
    width: 80px; 
 
    border-left: 5px solid blue; 
 
} 
 
.dotted-left:after { 
 
    border-left: 5px dotted blue; 
 
} 
 
.dotted-right:after { 
 
    border-right: 5px dotted blue; 
 
} 
 
.dotted-progress { 
 
    border-style:dotted; 
 
}

<div class="progress right"> 29</div> 
 
<div class="progress left dotted-left"> 28</div> 
 
<div class="progress dotted-progress"> 28</div>

來源

2017-10-17 12:20:15

是它與大多數的瀏覽器版本兼容漂亮？ – condo1234

@DavidHope謝謝;）我認爲依靠僞元素總是好的，更容易處理，並避免我們很多的HTML（即使它是很多的CSS） –

@TemaniAfif，同意。 –

您可以使用：

/* Rotate from top left corner (not default) */ 
-webkit-transform-origin: 0 0; 
-moz-transform-origin: 0 0; 
-ms-transform-origin:  0 0; 
-o-transform-origin:  0 0; 

-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-ms-transform:  rotate(90deg); 
-o-transform:  rotate(90deg);

這裏是一個工作小提琴：

https://jsfiddle.net/20x3ejz3/

你可以玩的示例代碼，以達到預期的結果，但這會給你一個開始poi NT。

來源

2017-10-17 12:19:07

自定義CSS行連接多個div /進度條

回答

相關問題