創建與垂直和水平線連接的CSS圓圈

我想創建一個帶有CSS和右下方線條的圓圈。類似於下面的圖片。我發現了一個水平連接圓的css code。我無法弄清楚如何將垂直線添加或與我附加的圖像相似？創建與垂直和水平線連接的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>

來源

2016-04-29 JessieBear

退房更新筆：

http://codepen.io/Debabrata89/pen/QNZrxE

下面是相關代碼：

HTML：

<div></div><span id="step1">step1</span> 
<div id="second"></div> 
<div></div><span id="step2">step2</span> 
<div id="last"></div>

CSS：

@import "compass/css3"; 

div { 
    width: 2em; 
    height: 2em; 
    text-align: center; 
    line-height: 2em; 
    border-radius: 1em; 
    background: dodgerblue; 
    margin: 0 1em; 
    color: white; 
    position: relative; 
-ms-transform: rotate(-180deg); 
-webkit-transform: rotate(-180deg); 
transform: rotate(-180deg); 
} 

div::before{ 
    content: ''; 
    position: absolute; 
    top: .9em; 
    left: -4em; 
    width: 4em; 
    height: .2em; 
    background: dodgerblue; 
    z-index: -1; 

} 



div:first-child::after { 
    display: none; 
} 



body { 
    font-family: sans-serif; 
    padding: 2em; 
} 
#last{ 
    transform: rotate(-90deg); 
    width:0; 
    height:0; 
} 
#second{ 
    transform: rotate(-90deg); 
    width:0; 
    height:10; 
    left:16px; 
    top:-16px; 

} 
#step1{ 
    position:absolute; 
    top:40px; 
    left:150px 
} 
#step2{ 
    position:absolute; 
    top:104px; 
    left:150px 
}

來源

2016-04-29 05:55:36

嘗試this fiddle。

我改變了一些屬性並添加了li：after。

li { 
    width: 2em; 
    height: 2em; 
    text-align: center; 
    line-height: 2em; 
    border-radius: 1em; 
    background: dodgerblue; 
    margin: 1em 1em; 
    color: white; 
    position: relative; 
} 
li::before { 
    content: ''; 
    position: absolute; 
    top: -4.1em; 
    left: 1em; 
    /* width: 4em; */ 
    width: .2em; 
    height: 2em; 
    background: dodgerblue; 
    z-index: -1; 
} 
li::after { 
    content: ''; 
    position: absolute; 
    top: 0.9em; 
    left: 1em; 
    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; 
}

來源

2016-04-29 05:59:12

使用僞元素的組合來實現目標。

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如果你喜歡

來源

2016-04-29 06:11:27

創建與垂直和水平線連接的CSS圓圈

回答

相關問題