title: arrow style css button
body: <p>I'm trying to make a big arrow back button but the arrow seems off center. Can anyone tell me how to clean this up and get it looking right?</p>
  
  <pre><code>#buttonboxback {
      left:20px;/*change the position*/
      top:10px;/*change the position*/
      position:absolute;
      background-repeat:repeat-x;
      background-color: #003366;/*change this and the background color for the :before element*/
          width:162px;
      height:56px;
      padding: 0 10px 0 8px;
      z-index : 0;
      border-radius: 6px;
      -webkit-border-top-left-radius : 10px 15px;
      -webkit-border-bottom-left-radius : 10px 15px;
      border-bottom: 1px solid rgba(255,255,255,0.3);
      box-shadow :-1px -1px 0px rgba(0,0,0,0.2)inset,
          0 1px 2px rgba(0,0,0,0.8)inset;
      font-size : 11px;
      display : block;
      text-align:center;
      color:#fff;
      text-shadow : 0px -1px 0px #000;
      line-height : 30px;
      font-family : HelveticaNeue;
      font-weight: 700;
      -webkit-background-size : 30px;
  }
  #buttonboxback:before{
      position:absolute;
      top:9.9%;
      left:-15px;
      -webkit-background-size : 22px 22px;
      background-position :-2px -1.5px;
      background-color: #003366;
      height : 45px;
      width: 60px;
      -webkit-transform : rotate(-45deg) skew(-10deg, -10deg);
      -webkit-border-top-right-radius : 100px 40px;
      -webkit-border-top-left-radius : 30px 2px;
      -webkit-border-bottom-right-radius : 2px 30px;
      -webkit-border-bottom-left-radius : 40px 100px;
      z-index : 1;
      content : ' ';
      border-left : 1.5px solid rgba(255,255,255,0.3);
      box-shadow :  1px 1px 0 rgba(0,0,0,0.2) inset,
          -1px 1px 1px rgba(0,0,0,0.5) inset;
      -webkit-mask-image :
          -webkit-gradient(linear, left top, right bottom,
              from(#000000),
              color-stop(0.33,#000000),
              color-stop(0.5, transparent),
              to(transparent));
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/9RHXS/" rel="nofollow">http://jsfiddle.net/9RHXS/</a></p>
  
  <p>Thanks!</p>
  
  <p>UPDATE: I adjusted the code and also added a hover but the hover does not work correctly.. </p>
  
  <p><a href="http://jsfiddle.net/9RHXS/2/" rel="nofollow">http://jsfiddle.net/9RHXS/2/</a></p>