css、弾丸が垂直方向に飛び散っている

Question

これは馬鹿に聞こえるかもしれませんが、私はここで縁があります。誰もがCSSやjavascriptでこれを行う方法を知っていますか？ （好ましくはCSS）

Answer 1

あなたはこれを試みることができる：

body { 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 12px; 
 
} 
 
.section_header { 
 
    background-color: #7e9489; 
 
    border-radius: 20px; 
 
    width: 200px; 
 
    height: 20px; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 10px; 
 
    line-height: 20px; 
 
} 
 
.section_content { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    display: block; 
 
    border-left: solid 2px #7e9489; 
 
    margin-left: 99px; 
 
    padding-top: 10px; 
 
} 
 
.section_content > li { 
 
    display: block; 
 
    position: relative; 
 
    line-height: 40px; 
 
} 
 
.section_content > li::before { 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    content: ''; 
 
    width: 12px; 
 
    height: 12px; 
 
    border-radius: 10px; 
 
    background-color: #7e9489; 
 
    margin-left: -7px; 
 
    margin-right: 20px; 
 
    z-index: 10; 
 
} 
 
.section_content > li > span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.section_content > li:last-child::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: -2px; 
 
    width: 2px; 
 
    height: 50%; 
 
    background-color: white; 
 
    z-index: 1; 
 
}

<div class="section_header">OCT 5, 2016</div> 
 
<ul class="section_content"> 
 
    <li><span>Segment 1</span></li> 
 
    <li><span>Segment 2</span></li> 
 
    <li><span>Segment 3</span></li> 
 
    <li><span>Segment 4</span></li> 
 
</ul>

Answer 2

クイックや汚れ： -

\t .date { 
 
\t \t border-radius: 30px; 
 
\t \t background-color: #7C9288; 
 
\t \t width: 200px; 
 
\t \t text-align: center; 
 
\t \t padding: 10px; 
 
\t \t color: #fff; 
 
\t } 
 
\t .box { 
 
\t \t border-left: 2px solid #7C9288; 
 
\t  margin-left: 110px; 
 
\t  margin-top: -16px; 
 
\t  padding-top: 20px; 
 
\t } 
 
\t li { 
 
\t \t color: #7C9288; 
 
\t \t list-style-type:none; 
 
\t } 
 
\t li:before{ 
 
\t \t content:'\00b7'; 
 
\t \t font-size:100px; 
 
\t \t line-height:24px; 
 
\t \t vertical-align:middle; 
 
\t } 
 
\t ul { 
 
\t \t margin-left: -57px; 
 
\t }

<div class="date">Today</div> 
 
<div class="box"> 
 
\t <ul> 
 
\t \t <li>Test</li> 
 
\t \t <li>Test 2</li> 
 
\t \t <li>Test 3</li> 
 
\t </ul> 
 
</div>