html时间轴样式

html代码

<div class="log-info">
            <div class="item-text-wrap">
                <div class="item item-divider task-title">
                    <div class="item-left">
                        <i class="icon ion-ios-paper-outline"></i>备注历史
                    </div>
                </div>
                <div class="task-content-line-times">
                    <section class="timeline">
                        <div class="timeline-block" ng-repeat="itemObj in historyRemarksList">
                            <div class="ctimeline-img">
                                <img src="img/real-time@2x.png">
                            </div>
                            <div class="r-info">
                                <div class="time-title">
                                    <texdivt>{{itemObj.contactDate}}</texdivt>
                                    <span ng-if="historyRemarksList.length>1" class="begin-end begin-all" ng-class="!$last?'item-last':''" style="background-color: #49c501;">起始</span>
                                    <span ng-if="historyRemarksList.length>1" class="begin-end end-all" ng-class="$index!=0?'item-first':''" style="background-color: #387ff5;">最新</span>
                                </div>
                                <div class="card">
                                    <div class="item-text-wrap">
                                        {{itemObj.remark}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>

　　

 

样式代码（有冗余代码）

    .log-info {
        margin: 8px 10px;
        background-color: #FFF;
        border-radius: 10px;
    }

    .log-info .task-title {
        display: flex;
        background-color: #FFF;
        border: 0px;
        border-radius: 3%;
    }

    .log-info .item-left {
        padding: 5px 0px 0px 0px;
        justify-content: flex-start;
        font-size: 14px;
    }

    .log-info .item-left i {
        color: #0c60ee;
        font-size: 17px;
        margin: 0px 5px 0px 0px;
    }

    .log-info .item-right {
        flex: 1;
        justify-content: flex-end;
        display: flex;
        align-items: center;
        text-align: center;
        padding: 0px 5px;
        color: #3D82F1;
        font-size: 12px;
        font-weight: bold;
    }

    .log-info button {
        min-height: 25px;
        line-height: 23px;
        font-size: 12px;
    }

    .log-info .task-content-line textarea {
        border: 1px solid #E6E6E6;
        width: 100%;
        height: 70px;
        margin: 2px 0px 10px 0px;
        padding: 5px;
        resize: none;
    }

    .r-info .task-title .item-right {
        flex: 1;
        justify-content: flex-end;
        display: flex;
        align-items: center;
        text-align: center;
        padding: 0px 5px;
        color: #3D82F1;
        font-size: 12px;
        font-weight: bold;
    }


    .top-card .item-text-wrap {
        padding: 10px 0px 0px 0px;
        border: 0px;
    }

    .task-content-line {
        padding: 7px 10px;
        margin: 0px 8px 0px 8px;
        font-size: 14px;
        display: flex;
        border-bottom: 1px solid #f0f0f0;
    }

    .task-content-line i {
        color: #0c60ee;
        font-size: 17px;
        margin: 0px 10px 0px 0px;
    }

    .task-content-line-left {
        color: #333333;
        width: 40%;

    }

    .task-content-line-right {
        word-break: break-all;
        word-wrap: break-word;
        color: #999999;
        text-align: right;
        width: 60%;
    }


    .timeline-block {
        border-left: 1px dashed #0c60ee;
        margin-left: 14px;
    }


    .ctimeline-img {
        position: relative;
        left: -10px;
        top: -5px;
    }

    .ctimeline-img img {
        border-radius: 25px;
        border: none;
        width: 20px;
        height: 20px;
    }


    .r-info {
        position: relative;
        top: -24px;
        left: 0px;
        width: 98%;
        margin-left: 5px;
    }


    .r-info .time-title {
        position: relative;
        left: 10px;
    }

    .r-info .card {
        margin: 10px 0px 0px 10px;
        background-color: #F1F7FE;
        padding: 10px;
        font-size: 13px;
        color: #808080;
        word-break: break-all;
        word-wrap: break-word;
        width: 28.5rem;
    }

    .r-info .task-title {
        font-size: 14px;
        font-weight: 600;
        display: flex;
        background-color: #FFF;
    }

    .r-info .task-title .item-left {
        justify-content: flex-start;
    }

    .r-info .task-title .item-right {
        flex: 1;
        justify-content: flex-end;
        display: flex;
        align-items: center;
        text-align: center;
        padding: 0px 5px;
        color: #3D82F1;
        font-size: 12px;
        font-weight: bold;
    }

    .r-info .task-content-line-left {
        color: #7c7c7c;
    }

    .where-tag {
        font-size: 11px;
        background-color: #00cc00;
        color: #FFF;
        margin: 0px 10px;
        padding: 1px 4px;
        border-radius: 15%;
    }

    .top-item {
        line-height: 33px;
    }

    .js_content_txt {
        border-radius: 6px
    }

    .item-last {
        display: none;
    }

    .item-first {
        display: none;
    }


    .begin-end {
        padding: 1px 4px 1px 4px;
        color: #FFF;
        font-size: 13px;
        width: 200px;
        height: 40px;
        text-align: center;
        position: relative;
        border-radius: 3px;
        margin-left: 16px;
    }
    .begin-end:before {
        content: "";
        position: absolute;
        left: -10px;
        top: 5px;
        border-bottom: 5px solid transparent;
        border-top: 5px solid transparent;
    }
    .begin-all:before {
        border-right: 11px solid #49c501;
    }
    .end-all:before {
        border-right: 11px solid #387ff5;
    }


    .task-content-line-times {
        padding: 10px 0px;
        margin: 0px 8px 0px 0px;
        font-size: 14px;
        display: flex;
        border-bottom: 1px solid #f0f0f0;
    }

　　

大致效果：