纯CSS3实现常见的时间进度线（竖立方向）

实现效果图：

实现思路：

html代码：

<div class="grow-item">
    <div class="time-line">
        <div class="time-line-dot"></div>
        <div class="time-line-title">2019年</div>
        <div class="time-line-cont">2019年厦门xxx公司被评为“国家高新技术企业”优秀奖项；</div>
    </div>
</div>
<div class="grow-item">
    <div class="time-line">
        <div class="time-line-dot"></div>
        <div class="time-line-title">2019年</div>
        <div class="time-line-cont">2019年厦门xxx公司被评为“国家高新技术企业”优秀奖项；</div>
    </div>
</div>
<div class="grow-item">
    <div class="time-line">
        <div class="time-line-dot"></div>
        <div class="time-line-title">2019年</div>
        <div class="time-line-cont">2019年厦门xxx公司被评为“国家高新技术企业”优秀奖项；</div>
    </div>
</div>

css代码：

.grow-item {display: flex;justify-content: space-between;height: 180px;}

.grow-item .time-line {position: relative;height: auto;padding:59px 146px 0 38px; border-left: 1px solid #e5e6e9;}

.grow-item:last-child .time-line:after {content: '';position: absolute;bottom: 0;left: -7px;width: 14px;height: 17px;border-radius: 5px;background-color: #e5e6e9;transform: perspective(4px) rotateX(12deg);}

.grow-item .time-line .time-line-dot {position: absolute;left: -10px; width: 18px;height: 18px;background-color: #ffffff;border-radius: 50%;border: solid 1px #d2d3d4;}

.grow-item .time-line .time-line-dot::after {content: ''; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); width: 10px;height: 10px;border-radius: 50%; background-color: #f49f16;}

.grow-item .time-line .time-line-title {font-size: 20px;font-weight: bold;color: #171f31;line-height: 23px;}

.grow-item .time-line .time-line-cont {font-size: 14px;color: #353f57;line-height: 24px;margin-top: 10px;}