TimeLine

by charmis

HTML

<div id="divParent" style="width:100%;height:175px; overflow-x:auto; overflow-y: hidden; white-space: nowrap;">
  <ol id="historyTimeLine">
    <li>
      <div class="arrow">
        <div style="width:220px; background-color:#A268B1; text-align:right;"></div><b>Action: </b>Case Creation
        <br><b>Owner(User): </b>Charmis Poovan varghese
        <br><b>Primary Team: </b>TMCS Check Verify WS
        <br><b>Status: </b>In Progress</div>
      <div class="timeCircle"><span class="details"><b>Step Performed By: </b>Charmis Poovan varghese<br><b>Time(HH:MM:SS): </b>241:42:33</span></div>
    </li>
    <li>
      <div class="arrow">
        <div style="width:220px; background-color:#A268B1; text-align:right;"></div><b>Action: </b>Case Assignment Change
        <br><b>Owner(User): </b>Naveen Gaddipati
        <br><b>Primary Team: </b>
        <br><b>Status: </b>In Progress</div>
      <div class="timeCircle"><span class="details"><b>Step Performed By: </b>SYSTEM<br><b>Time(HH:MM:SS): </b>00:00:37</span></div>
    </li>
    <li>
      <div class="arrow">
        <div style="width:220px; background-color:#A268B1; text-align:right;"></div><b>Action: </b>Case Assignment Change
        <br><b>Owner(User): </b>Vinoth Balasubramanian
        <br><b>Primary Team: </b>ABC Company
        <br><b>Status: </b>Researching</div>
      <div class="timeCircle"><span class="details"><b>Step Performed By: </b>SYSTEM<br><b>Time(HH:MM:SS): </b>64:28:27</span></div>
    </li>
    <li>
      <div class="arrow">
        <div style="width:220px; background-color:#A268B1; text-align:right;"></div><b>Action: </b>Case Assignment Change
        <br><b>Owner(User): </b>Charmis Poovan varghese
        <br><b>Primary Team: </b>TMCS Check Verify WS
        <br><b>Status: </b>Researching</div>
      <div class="timeCircle"><span class="details"><b>Step Performed By: </b>SYSTEM<br><b>Time(HH:MM:SS): </b>00:00:33</span></div>
    </li>
    <li>
      <div class="arrow">
        <div...

CSS

ol {
  position: relative;
  margin-top: 70px;
  margin-right: 70px;
  margin-left: 30px;
  height: 4px;
  width: auto;
  min-width: 90%;
  background: #A268B1;
  display: inline-block;
}

ol::before,
ol::after {
  content: "";
  position: absolute;
  top: -8px;
  display: block;
  border-radius: 50px;
  border: 10px solid #A268B1;
}

ol::before {
  left: -5px;
}

ol::after {
  right: -20px;
  border: 10px solid transparent;
  border-right: 0;
  border-left: 20px solid #A268B1;
  border-radius: 3px;
}


/* ---- Timeline elements ---- */

li {
  position: relative;
  top: -77px;
  display: inline-block;
  width: 350px;
  white-space: nowrap;
}

.timeCircle {
  content: "";
  position: absolute;
  top: 72px;
  left: 300px;
  width: 6px;
  height: 6px;
  border: 4px solid #A268B1;
  border-radius: 10px;
  background: #eee;
}


/* ---- Details ---- */

.details {
  display: none;
  position: absolute;
  top: 20px;
  left: -15px;
  padding: 15px;
  border-radius: 3px;
  background: #F7C5DC;
  color: #FFF;
  border-right: 2px solid rgba(0, 0, 0, .1);
  border-bottom: 2px solid rgba(0, 0, 0, .1);
  font: 12px arial;
  width: 250px;
  height: 30px;
  z-index: 1;
}

.details::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -9px;
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #F7C5DC;
  border-top: 0;
}


/* ---- Hover effects ---- */

.timeCircle:hover {
  cursor: pointer;
}

.timeCircle:hover .details {
  display: block;
  color: #444;
}

.arrow {
  border-right: 1px solid transparent;
  background: #A268B1;
  height: 100px;
  position: relative;
  width: 220px;
  color: white;
  font-size: 12px;
  font-family: "segoe ui";
  padding: 5px;
  top: 24px;
}

.arrow::after {
  border-left: 33px solid #A268B1;
  border-top: 55px solid transparent;
  border-bottom: 55px solid transparent;
  content: "";
  position: absolute;
  left: 231px;
  top: 0;
}