小编Jes*_*ear的帖子

创建与垂直和水平线连接的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;
            } …

Run Code Online (Sandbox Code Playgroud)

css css3

Jes*_*ear

2016 04-29

2
推荐指数

1
解决办法

5112
查看次数

标签统计

css ×1

css3 ×1

创建与垂直和水平线连接的CSS圆

标签 统计

小编Jes_ear的帖子

标签统计