CSS Trick: Arrow

Arrow is created by two rhombus. The first arrow is created by red and yellow rhombus. Then, I changed the color; red one to the same color as background, yellow one to white.
 

------------------------------------------------------------------------------------------
<HTML><li　class="arrow">
<a href="http://testsite1.localhost:8082/">Menu 01</a>
</li>
------------------------------------------------------------------------------------------
<CSS>
.arrow li a{
          position: relative;
          display: block;
          margin: 10px;
          padding-top: 20px;
          padding-right: 0px;
          padding-bottom: 20px;
          padding-left: 10px;
          background: #455560;
          color: #fff;
          font-weight: bold;
          text-decoration: none;
}
.arrow li a:before{
          display: block;
          content: "";
          position: absolute;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          top: 50%;
          right: 15px;
          width: 10px;
          height: 10px;
          margin-top: -5px;
          background: #fff;
}
.arrow li a:after{
          display: block;
          content: "";
          position: absolute;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          top: 50%;
          right: 20px;
          width: 10px;
          height: 10px;
          margin-top: -5px;
          background: #455560;
}

------------------------------------------------------------------------------------------