实现效果图:
实现思路:
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;}