具有透明度的CSS邊框變化

我試圖製作一個HTML/CSS菜單，其中活動鏈接由一段透明度（指針偏離邊框）指示，以顯示菜單後面的圖像。具有透明度的CSS邊框變化

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

但隨着這種缺口指針：http://larsakerson.com/northendgreenway/beta2.html

有沒有辦法在CSS來做到這一點（無論是2.1或3），或者是嚴格基於圖像的菜單是完成這項工作的唯一方法？

來源

2011-05-26 la.

我不是100％確定你在問什麼 - 你可以根據需要添加/刪除背景，但我認爲沒有辦法「「一個CSS邊框。 – Dutchie432 2011-05-26 12:34:53

我知道的唯一方法就是使用圖像... – Liam 2011-05-26 12:37:18

您可以用邊框，像這樣一個缺角...

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

jsFiddle。

請參閱jsFiddle並注意頂部角落是讓背景通過。只需將此示例適用於您的網站。

來源

2011-05-26 12:40:33 alex

不錯。幾乎一樣的東西。但你比我快。 – albert 2011-05-26 12:42:48

在這裏你去花花公子。 http://jsfiddle.net/jalbertbowdenii/vnNXW/ 只是改變.trapezoid到。主動：主動{}

.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 {border-color：transparent}

來源

2011-05-26 12:42:16 albert

具有透明度的CSS邊框變化

回答

相關問題