Css border shape and working with hover state - html

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>Home</li>
<li>About</li>
<li>Resources</li>
<li>FAQs</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; }