我想在 CSS 中创建一个在右边和底部有线条的圆。类似下图。我找到了一个 css code水平连接圆圈。我不知道如何垂直添加线条或类似于我附加的图像？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
@import "compass/css3";
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
position: relative;
}
li::before {
content: '';
position: absolute;
top: .9em;
left: -4em;
width: 4em;
height: .2em;
background: dodgerblue;
z-index: -1;
}
li:first-child::before {
display: none;
}
.active {
background: dodgerblue;
}
.active ~ li {
background: lightblue;
}
.active ~ li::before {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="active">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
最佳答案
使用伪元素的组合来实现目标。
ul {
list-style: none;
margin: 50px;
padding: 0;
font: normal 16px/22px Arial;
color: #999;
}
li {
overflow: hidden;
position: relative;
padding: 0 0 10px 35px;
}
li::before {
content: '';
position: absolute;
left: 9px;
top: 9px;
width: 20px;
height: 999px;
border: 2px solid lightblue;
border-width: 2px 0 0 2px;
}
li:last-child::before {
border-width: 2px 0 0;
}
li::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
background: #fff;
border: 2px solid lightblue;
border-radius: 50%;
}
li.current,
li.passed {
color: #000;
}
li.current::before {
border-top-color: dodgerblue;
}
li.current::after {
border-color: dodgerblue;
background: dodgerblue;
}
li.passed::before,
li.passed::after {
border-color: dodgerblue;
}<ul>
<li class="passed">Step #1</li>
<li class="passed">Step #2</li>
<li class="passed">Step #3</li>
<li class="current">Step #4<br><small><i>Description of the step</i></small></li>
<li>Step #5</li>
<li>Step #6</li>
<li>Step #7</li>
</ul>参见 jsfiddle如果你愿意
关于css - 创建与垂直线和水平线相连的 CSS 圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36929965/