Css边框形状和悬停状态答案

【问题标题】：Css border shape and working with hover stateCss边框形状和悬停状态
【发布时间】：2014-04-17 10:17:10
【问题描述】：

问题：为什么当你使用 here 看到的边框技巧制作 css 形状时，它会将元素的视觉效果移出 dom 框？

所以我在搜索的时候发现了这两个问题：

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

但我认为这两者都不能解决我的问题（尽管如果我想更改我的 html 结构，我可能会使用第一个链接中的答案。

示例图片说明：

这意味着当我将鼠标悬停在该元素的下半部分时，它会突出显示其下方的元素。

我明白即使我有一颗钻石，盒子模型说它仍然是一个矩形，但是为什么钻石不包含在那个矩形内？

有没有办法解决这个问题 - 使用 css/markup - 还是我必须使用第一个链接中的映射解决方案？

我的源代码以防有人想要：

<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;
}

【问题讨论】：

@Will 很抱歉我没有回复你。我几乎得到了和你一样的解决方案，但我还没有让它与我的代码或你的代码一起工作。无论我如何操纵a 标签的区域，我似乎都无法让它覆盖所有的形状区域。有什么想法吗？
是的，请参阅更新的答案。那是一个有趣的。干杯。

标签： html css

【解决方案1】：

我不是 100% 确定原因，但您可以通过将 <a> 设置为悬停目标并填充空间来绕过它：

.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;
}

这是一支工作笔http://codepen.io/willthemoor/pen/KpcLD/（更新）

编辑

让它完美排列可能需要一些试验和错误，但您可以使用transform 属性旋转和倾斜<a> 以匹配形状。我更新了笔。

我必须添加一些倾斜以匹配菱形的形状，然后在<a> 内使用<span> 来排序还原更改。倾斜会与文本混淆，因此您可能会尝试在边框菱形的形状和无需使用倾斜即可制作的形状之间找到一个合适的中间值。

.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; }

【讨论】：