一.代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./reset.css">
  9.     <style>
  10.         body{
  11.             background-image: linear-gradient(to bottom,#fdf1d8,#b1bbf9);
  12.         }
  13.         .time-axis{
  14.             width: 804px;
  15.             height: 700px;
  16.             border: 2px red solid;
  17.             margin: 50px auto 0;
  18.         }
  19.         .time-axis .left{
  20.             width: 400px;
  21.             /*height: 300px;*/
  22.             float: left;
  23.             border-right: 4px #b1bbf9 solid;
  24.             position: relative;
  25.         }
  26.         .time-axis .right{
  27.             width: 400px;
  28.             /*height: 300px;*/
  29.             float: right;
  30.             border-left: 4px #b1bbf9 solid;
  31.             position: relative;
  32.         }
  33.         .time-axis .dot{
  34.             width: 10px;
  35.             height: 10px;
  36.             background-color: #fff;
  37.             display: block;
  38.             border: 2px #b1bbf9 solid;
  39.             border-radius: 50%;
  40.             position: absolute;
  41.             right: -9px;
  42.             top: 50%;
  43.             margin-top: -7px;
  44.         }
  45.         .time-axis .right .dot{
  46.             left:-9px;
  47.         }
  48.         .time-axis .jiantou{
  49.             width: 0;
  50.             height: 0;
  51.             border: 20px solid transparent;
  52.             border-left-color:  white ;
  53.             position: absolute;
  54.             right: 0px;
  55.             top: 50%;
  56.             margin-top: -16px;
  57.         }
  58.         .time-axis .right .jiantou{
  59.             width: 0;
  60.             height: 0;
  61.             border: 20px solid transparent;
  62.             border-right-color:  white ;
  63.             left: 0;
  64.         }
  65.         .time-axis .con{
  66.             height: 200px;
  67.             background-color: white;
  68.             padding: 15px;
  69.             border-radius: 10px;          
  70.         }
  71.         .time-axis .left .con{
  72.             margin-right: 30px;
  73.         }
  74.         .time-axis .right .con{
  75.             margin-left: 30px;
  76.         }
  77.     </style>
  78. </head>
  79. <body>
  80.     <div class="time-axis">
  81.         <div class="left">
  82.             <span class="dot"></span>
  83.             <div class="jiantou"></div>
  84.             <div class="con"></div>
  85.         </div>
  86.         <div class="right">
  87.             <span class="dot"></span>
  88.             <div class="jiantou"></div>
  89.             <div class="con"></div>
  90.         </div>
  91.     </div>
  92. </body>
  93. </html>