<ul class="box">
  <li class="text" title="For people who want to be inside.">Login</li>
  <li class="text" title="If you want to be able to be inside.">Sign up</li>
  <li class="text" title="In case you forgot your keys.">Forgotten password</li>
  <li class="text" title="Firefox is awesome. Try this page on it.">Browser support</li>
<p>This page makes Internet Explorer 10 buggy!</p>
<p>Also reveals the inability of Chrome to be awesome!</p>


              html { background: #A2B3BB; }

.box {
  width: 250px;
  background: #57A5CE;
  color: white;
  font-family: 'Lucida Console',monospace;
  border: 2px solid #415BA3;
  border-radius: 9px;
  position: relative;
  margin: 5em auto;
  padding: 1px;
  list-style: none;
  box-shadow: 0 0 3em #FFF;
  text-shadow: 1px 1px 0 #29265D;

.text {
  width: 100%;
  height: 50%;
  margin: 0;
  padding: 0;
  line-height: 50px;
  text-align: center;
  position: relative;

.text + .text {
  border-top: 2px solid #415BA3;

.text:after {
  display: inline-block;
  border-color: transparent #57A5CE transparent transparent;
  border-style: solid;
  border-width: 16px 0 16px 0;
  content: '';
  margin: 9px 0;
  position: absolute;
  right: 100%;
  top: 0;
  -webkit-transition: border-width 125ms ease-out 0s;
  transition: border-width 125ms ease-out 0s;
  border-radius: 0 7px 7px 0;

.text:before {
  border-right-color: white;
  border-width: 19px 0 19px 0;
  font-size: .8em;
  line-height: 0;
  margin: 6px 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition-delay: 125ms;
  transition-delay: 125ms;
  white-space: nowrap;

.text:hover:after {
  border-width: 16px 25px 16px 0;

.text:hover:before {
  border-right-color: #415BA3;
  border-width: 19px 29px 19px 0;
  content: attr(title);
  -webkit-transform: none;
  transform: none;
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;


Loading ..................