CSS边框的变化具有透明度

问题描述

| 我正在尝试制作一个HTML / CSS菜单，其中的活动链接由透明部分（在边框上刻有缺口的指针）指示，以显示菜单后面的图像。 这就是我要去的地方：http://larsakerson.com/northendgreenway/beta3.html 但是带有这种缺口指针：http://larsakerson.com/northendgreenway/beta2.html 在CSS（2.1或3）中是否有任何方法可以做到这一点，或者仅基于图像的菜单是实现此目的的唯一方法？     

解决方法

您可以像这样使用边框制作缺口角...

div {
   width: 0;
   height: 0;
   border-width: 20px;
   border-style: solid;
   border-color:  transparent blue blue blue;
   background: transparent; 
}

jsFiddle。 请参阅jsFiddle，并注意顶部使背景通过。只需将此示例调整为您的站点即可。     ,在这里，你去哥们。 http://jsfiddle.net/jalbertbowdenii/vnNXW/ 只需将.trapezoid更改为.active：active {}

.trapezoid { 

    display:block;

    margin:0;

    padding:0;

    width:1px; 

    height:1px;

    background:transparent;

    border-style: solid;

     border-color:transparent #eee #eee #eee;

    border-width: 50px 50px 50px 50px;

}

并更改边框大小以适合。 用于.active {border-color：transparent}