Tab bar with pointer

by Danny_Joris

HTML

<a href="#" id="bar" title="Department">Department</a>

CSS

#bar {
   width: 300px;
   height: 20px;
   background: #00386b;
   position: relative;
   color: lightblue;
   padding: 10px;
   font-family: sans-serif;
   font-size: 90%;
   display: block;
   text-decoration: none;
}
#bar:before {
   content:"";
   position: absolute;
   left: 100%;
   top: 0;
   width: 0;
   height: 0;
   border-top: 20px solid transparent;
   border-left: 10px solid lightblue;
   border-bottom: 20px solid transparent;
}