Css border shape and working with hover state

Question

Question: Why when you make css shapes using the border tricks seen here does it move the visual of your element out of its dom-box?

So I found these two questions while searching:

Can I use CSS hover on this complex irregular shaped link
Hovering on overlapping CSS3 shapes

But I don't think that either addresses my question (though if I want to change my html structure I could probably use the answer from that first link.

Example pics to illustrate:

Which means that when I hover over the bottom half of that element it highlights the one below it.

I understand that even though I have a diamond visually the box-model says that it's still a rectangle, but why is the diamond not contained inside that rectangle?

Is there a way around this - with css/markup -, or do I have to go with the maping solution from the first link?

My source code incase anyone wants that:

<header class="navigation">
    <div class="nav">
        <ul class='master_nav'>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#" style="margin-left:-10px;">Resources</a></li>
            <li><a href="#">FAQs</a></li>
        </ul>
    </div>
</header>

.navigation li{
    height: 0;
    width: 0;
    margin: 10px 0;
    list-style: none;
    position: relative;
    border: 70px solid transparent;
    border-bottom: 90px solid #2B2B2B;
    display: block;
}
.navigation li:after{
    content: '';
    position: absolute;
    left: -70px; top: 90px;
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-top: 90px solid #2B2B2B;
}

.navigation li a{
    height: 25px;
    width: 100%;
    display: inline-block;
    text-decoration: none;
    color: #b7b7b7;
    position: absolute;
    top: 75px;
    left: -19px;
}

.navigation li:hover a{
    color: #010101;
}

Answer 1

I'm not 100% sure why but you can get around it by making the <a> the hover target and filling the space:

.navigation li a{
    height:70px;
    width: 80px;
    display: block;
    text-decoration: none;
    color: #b7b7b7;
    position: absolute;
    top: 38px;
    left: -40px;
    padding-top: 40px;
    text-align: center;
    border: 1px solid yellow;  //just to see it.
}

.navigation a:hover{
    color: #010101;
}

Here's a working pen http://codepen.io/willthemoor/pen/KpcLD/ (updated)

Edit

Getting it lined up perfectly might take a little trial and error but you can use the transform property to rotate and skew the <a> to match the shape. I updated the pen.

I had to add some skew to match the shape of the diamonds, and then use a a <span> inside of the <a> to sort revert the changes. Skew messes with text so you might try to find a happy medium between the shape of your border diamonds and the shape you can make without using skew.

.navigation li{
    height: 0;
    width: 0;
    margin: 10px 0;
    list-style: none;
    position: relative;
    border: 70px solid transparent;
    border-bottom: 90px solid #2B2B2B;
    display: block;
    /* position fix */
    top: -90px;
    left: -19px;
}
.navigation li:before{
    content: '';
    position: absolute;
    left: -70px; 
    top: 90px;
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-top: 90px solid #2B2B2B;
}

.navigation li a{
    background-color: rgba(255, 0, 0, 0.3);
    color: #B7B7B7;
    display: block;
    height: 68px;
    left: -55px;
    padding-top: 40px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 34px;
    -webkit-transform:rotate(314deg);
    transform: rotate(314deg);
    width: 110px;
 }
.skew li a {
  /* following lines it up better but hard to 'rewind it' on the span witout the text looking a little strange  */
  -webkit-transform: rotate(310deg) skewX(-11deg) skewY(-2deg);
  transform: rotate(310deg) skewX(-11deg) skewY(-2deg);

  height: 73px;
  left: -55px;
  width: 112px;
}

.navigation a:hover{
    background-color: rgba(0,0,255,.3);
    color: #010101;
}
.navigation a >  span {
  display: block;
  /* and reset the text*/
  -webkit-transform: rotate(46deg);    
  transform: rotate(46deg);

}
.skew a > span {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);

  letter-spacing: .04em;
}

/* 
lis are actually covering each other on the bottoms.
Adding this hacky bit makes the bottom of the diamond link work. Could use classes instead. 
*/

.navigation li { z-index: 100; }
.navigation li + li { z-index: 90; }
.navigation li + li + li { z-index: 80; }
.navigation li + li + li + li { z-index: 70; }