在前端网看到个时间轴的效果，故简单模范了个。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin: 50px;} .container{margin-left: 30%;list-style: none;border-left: 10px solid #405665;} .container li{position: relative;display: block;} .container li:before{position: absolute;left: -60px;top: -1px;content: ‘‘;width: 30px;height: 30px;border-radius: 100%;background-color: #405665;} .container time{position: absolute;left: -21%;top: 14px;color: #aaa;font-weight: bold;} .content{padding: 30px;margin-bottom: 20px;color: #fff;background-color: #405665;border-radius: 10px;} .content:before{position: absolute;top: 20px;left: -3%;content:‘‘;width: 0;height: 0;border: 15px solid transparent;border-right-color: #405665;} </style> </head> <body> <ul class="container"> <li> <time>2016-04-14</time> <div class="content"> <h4>Strong survive!</h4> <p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p> </div> </li> <li> <time>2016-04-14</time> <div class="content"> <h4>Strong survive!</h4> <p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p> </div> </li> <li> <time>2016-04-14</time> <div class="content"> <h4>Strong survive!</h4> <p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p> </div> </li> <li> <time>2016-04-14</time> <div class="content"> <h4>Strong survive!</h4> <p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p> </div> </li> </ul> </body> </html>
原文：http://www.cnblogs.com/11lang/p/6746486.html