CSS 邊框變化與透明度

Question

我正在嘗試制作一個 HTML/CSS 菜單，其中活動鏈接由一段透明度（從邊框切出的指針）指示，以顯示菜單后面的圖像。

這就是我想要的： http://larsakerson.com/northendgreenway/beta3.html

但是使用這種缺口指針： http://larsakerson.com/northendgreenway/beta2.html

在 CSS（2.1 或 3）中是否有任何方法可以做到這一點，或者嚴格基於圖像的菜單是實現此工作的唯一方法？

Answer 1

你可以使用這樣的邊框制作一個缺口角......

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

js小提琴。

請參閱 jsFiddle 並注意頂角讓背景通過。 只需將此示例調整到您的站點即可。

Answer 2

給你 go 老兄。 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;

}

並更改邊框大小以適應。 for.active{邊框顏色：透明}