HTML 程式碼

<div class="timeline">
  <div class="tlitem">
    <div class="tlitem_frame">
      <span class="tlitem_icon">
        <div class="tlitem_time">1980/1</div>&nbsp;
        <div class="tlitem_line"></div>
      </span>
      <div class="tlitem_content">
        <h4>TEST 1</h4>
        <div>
          <p>TEST</p>
        </div>
      </div>
    </div>
  </div>
  <div class="tlitem">
    <div class="tlitem_frame">
      <span class="tlitem_icon">
        <div class="tlitem_time">1995/11</div>&nbsp;
        <div class="tlitem_line"></div>
      </span>
      <div class="tlitem_content">
        <h4>TEST 2</h4>
        <div>
          <p>TEST</p>
        </div>
      </div>
    </div>
  </div>
  <div class="tlitem">
    <div class="tlitem_frame">
      <span class="tlitem_icon">
        <div class="tlitem_time">1997/1</div>&nbsp;
        <div class="tlitem_line"></div>
      </span>
      <div class="tlitem_content">
        <h4>TEST 3</h4>
        <div>
          <p>TEST
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS 程式碼

.timeline{
    position: relative;
    width: 500px;
    .tlitem{
        width: 100%;
        .tlitem_frame{
            padding: 16px;
            display: inline-block;
            width: 100%;
            .tlitem_icon{
                position: absolute;
                left: 94px;
                .tlitem_time{
                    position: absolute;
                    left: -72px;
                    top: 72px;
                }
                .tlitem_line{
                    position: absolute;
                    left: 0px;
                    top: 76px;
                    background-color: black;
                    border-radius: 8px;
                    width: 72px;
                    height: 12px;
                }
            }
            .tlitem_icon::before{
                position: absolute;
                top:72px;
                left: -3px;
                content: '';
                width: 20px;
                height: 20px;
                background: black;
                border-radius: 100%;
                border: gray 3px solid;
            }
            .tlitem_icon::before .red {
                background: red;
            }
            .tlitem_content{
                padding: 16px;
                display: inline-block;
                background: #fff23b;
                border-left: 12px solid black;
                color: black;
                border-radius: 12px;
                width: auto;
                margin-left: 144px;
            }
        }
    }
}

.timeline::before{
    content: '';
    width: 12px;
    height: 100%;
    background: gray;
    position: absolute;
    left: 94px;
    border-radius: 8px;
}

預覽畫面

Categories: 開發

Tagged as: CSS css3 HTML 原創 時間軸 設計

creamgod45