创建与垂直和水平线连接的CSS圆
我想在CSS的右侧和底部创建一个带有线条的圆圈.类似于下图.我发现了一个水平连接圆圈的css 代码.我无法弄清楚如何垂直添加线条或类似于我附加的图像？
<!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
| 归档时间： |
|
| 查看次数： |
5112 次 |
| 最近记录： |