Simple Pure CSS Responsive Timeline (Free Download)

Welcome to a tutorial and example of how to create a simple vertical timeline using pure CSS. Yes, there is a ton of timeline plugins on the Internet, but nothing beats having the knowledge to build one yourself and the power to style as you please. So here it is, let us walk through a lightweight pure CSS timeline in this guide – Read on!

 

 

TABLE OF CONTENTS

 

 

EXAMPLE CODE DOWNLOAD

Click here to download. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

 

TUTORIAL VIDEO

 

VERTICAL TIMELINE DEMO

 

THE HTML

<div class="vtl">
  <div class="event">
    <p class="date">11 Mar 2237 12:34</p>
    <p class="txt">Evil Cates invaded planet Doge.</p>
  </div>
  <div class="event">
    <p class="date">12 Mar 2237 14:23</p>
    <p class="txt">Cates ate Doge food.</p>
  </div>
  <div class="event">
    <p class="date">13 Mar 2237 20:12</p>
    <p class="txt">Cates took over the Doge beds.</p>
  </div>
  <div class="event">
    <p class="date">14 Mar 2237 08:11</p>
    <p class="txt">Hoomans to the rescue.</p>
  </div>
  <div class="event">
    <p class="date">15 Mar 2237 14:27</p>
    <p class="txt">Evil cates gone. Victory for good boys and girls.</p>
  </div>
</div>

There is nothing “special” with the HTML, just need to create the container and events accordingly.

• Start by creating a <div class="vtl"> container to put all the events in.
• Sandwich the events <div class="event"> inside the container.
• Finally, insert the <p class="date"> timestamp and the <p class="txt"> event itself.

That’s all.

 

 

THE CSS

/* (A) CONTAINER & SHARED */
.vtl, .vtl * {
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}
.vtl {
  padding-left: 50px; /* "reserve space" for vertical line */
  max-width: 600px; /* optional */
}
.vtl, .event { position: relative; } /* required for absolute position to work properly */
.vtl::before, .event::before, .event::after { position: absolute; }
 
/* (B) VERTICAL LINE */
.vtl::before {
  /* (B1) DRAW VERTICAL LINE */
  content: ""; width: 5px;
  background: #a9a9a9;
 
  /* (B2) POSITION TO THE LEFT */
  top: 0; bottom: 0; left: 15px;
}
 
/* (C) EVENTS */
.event {
  padding: 20px; margin-bottom: 10px; border-radius: 5px;
  background: #b52929;
}
.event p {
  padding: 0; margin: 0;
  color: #fff;
}
p.date { font-size: 1.1em; font-weight: 700; }
p.txt { font-size: 0.9em; }
 
/* (D) CIRCLE ON VERTICAL LINE */
.event::after {
  /* (D1) DRAW CIRCLE */
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 4px solid #b52929;
  background: #fff;
 
  /* (D2) POSITION ON VERTICAL LINE */
  top: 20%; left: -44px;
}
 
/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
.event::before {
  /* (E1) DRAW TRIANGLE */
  content: "";
  border: 10px solid transparent; 
  border-right-color: #b52929;
  border-left: 0;
 
  /* (E2) POSITION TO THE LEFT */
  top: 20%; left: -10px;
}

This may look intimidating to beginners, but it’s easier to study in the following order.

• (C) Straightforward, we are just turning <div class="event"> into “rectangle boxes” here.
• (A & B) We “reserve” some space on the left side of the container using .vtl { padding-left: 50px }. Then, draw the vertical line using .vtl::before.
• (D) Use .event::after to draw the “event circle on the timeline”.
• (E) To turn the “rectangle event box” into a “speech callout”, we add a triangle on the left side.

If you are wondering how the circle magically appears, and border can transform into a triangle – See the extras section below.

 

 

 

 

ALTERNATE TIMELINE DEMO

 

THE HTML

<div class="alt-vtl">
  <div class="alt-event">
    <p class="date">11 Mar 2237 12:34</p>
    <p class="txt">Evil Cates invaded planet Doge.</p>
  </div>
  <div class="alt-event">
    <p class="date">12 Mar 2237 14:23</p>
    <p class="txt">Cates ate Doge food.</p>
  </div>
  <div class="alt-event">
    <p class="date">13 Mar 2237 20:12</p>
    <p class="txt">Cates took over the Doge beds.</p>
  </div>
  <div class="alt-event">
    <p class="date">14 Mar 2237 08:11</p>
    <p class="txt">Hoomans to the rescue.</p>
  </div>
  <div class="alt-event">
    <p class="date">15 Mar 2237 14:27</p>
    <p class="txt">Evil cates gone. Victory for good boys and girls.</p>
  </div>
</div>

Yep, the HTML in this alternate version is the same as previously – The difference is in the CSS.

 

 

THE CSS

/* (A) CONTAINER & SHARED */
.alt-vtl, .alt-vtl * {
  font-family: 'Courier New', Courier, monospace;
  box-sizing: border-box;
}
.alt-vtl {
  margin: 0 auto; /* horizontally centered */
  max-width: 600px; /* optional */
}
.alt-vtl, .alt-event { position: relative; } /* required for absolute position to work properly */
.alt-vtl::before, .alt-event::before, .alt-event::after { position: absolute; }

/* (B) VERTICAL LINE */
.alt-vtl::before {
  /* (B1) DRAW VERTICAL LINE */
  content: ""; width: 5px;
  background: #a9a9a9;

  /* (B2) POSITION IN THE MIDDLE */
  top: 0; bottom: 0; left: 50%;
}

/* (C) EVENTS */
.alt-event {
  width: 45%;
  padding: 20px; margin-bottom: 10px; border-radius: 5px;
  background: #296eb5;
}
.alt-event:nth-child(even) { left: 55%; } /* alternate right */
.alt-event p {
  padding: 0; margin: 0;
  color: #fff;
}
p.date { font-size: 1.1em; font-weight: 700; }
p.txt { font-size: 0.9em; }

/* (D) CIRCLE ON VERTICAL LINE */
.alt-event::after {
  /* (D1) DRAW CIRCLE */
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 4px solid #296eb5;
  background: #fff;

  /* (D2) POSITION ON VERTICAL LINE */
  top: 20%; left: 107%;
}
.alt-event:nth-child(even)::after { left: -15%; } /* alternate */

/* (E) EVENT "SPEECH BUBBLE CALLOUT" */
.alt-event::before {
  /* (E1) DRAW TRIANGLE */
  content: "";
  border: 10px solid transparent; 
  border-left-color: #296eb5;
  border-right: 0;

  /* (E2) POSITION TO THE RIGHT */
  top: 20%; left: 100%;
}

/* (E3) ALTERNATE */
.alt-event:nth-child(even)::before {
  border-right: 10px solid #296eb5;
  border-left: 0;
  left: auto; right: 100%;
}

Yikes. This looks like brain damage material, but it is just a slightly modified version of the earlier one:

• (C) Same old “turn <div class="alt-event"> into a rectangle box”.
  • But take note, there is a width: 45% to occupy half-ish of the container.
  • By default, the event will be on the left, for every alternate entry, we use left: 55% to offset the event to the right.
• (A & B) Same old strategy to use .alt-vtl::before to draw the vertical timeline. But we use left: 50% to position it in the middle of the container instead.
• (D & E) Same old speech callout and “circle on the timeline”, just different positioning.

 

 

 

CSS “MAGIC CIRCLE”

• Define same width and height, this turns into a square.
• Just add border-radius: 50%, effectively turns into a circle.

 

CSS “MAGIC TRIANGLE”

• The above has border: 20px solid. Left is red, top is green, right is blue, and bottom is yellow.
• Notice how the borders cut at 45 degrees? To create a “left triangle”:
  • We set transparent top and bottom borders.
  • No border on the left.
  • Set a solid right border.

 

LINKS & REFERENCES

• How To Create Triangles In HTML CSS – Code Boxx
• How to Create CSS Circles – Code Boxx
• Examples On CodePen – Vertical Timeline | Alternating Timeline