自定义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 /进度条

回答

相关问题