html - 具有透明度的 CSS 边框变化

Question

我正在尝试制作一个 HTML/CSS 菜单，其中事件链接由透明部分(边框外的指针)指示，以显示菜单后面的图像。

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

但是有了这种带缺口的指针:http://larsakerson.com/northendgreenway/beta2.html

有没有什么方法可以在 CSS(2.1 或 3)中做到这一点，或者严格基于图像的菜单是否是实现此目的的唯一方法？

Answer 1

你可以像这样使用边框制作一个有缺口的 Angular ......

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

jsFiddle .

引用 jsFiddle 并注意顶 Angular 让背景通过。只需将此示例改编为您的网站即可。