自定义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;
}
答
您可以尝试伪元素是这样的:
.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>
答
您可以使用:
/* 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。
是它与大多数的浏览器版本兼容漂亮? – condo1234
@DavidHope谢谢;)我认为依靠伪元素总是好的,更容易处理,并避免我们很多的HTML(即使它是很多的CSS) –
@TemaniAfif,同意。 –