具有透明度的 CSS 边框变化答案

【问题标题】：CSS border variation with transparency具有透明度的 CSS 边框变化
【发布时间】：2011-05-26 12:31:45
【问题描述】：

我正在尝试制作一个 HTML/CSS 菜单，其中的活动链接由一段透明度（从边框切出的指针）指示，以显示菜单后面的图像。

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

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

有没有办法在 CSS（2.1 或 3）中做到这一点，或者严格基于图像的菜单是实现这一点的唯一方法？

【问题讨论】：

我不是 100% 确定你在问什么 - 你可以根据需要添加/删除背景，但我不认为有办法“缺口”CSS 边框。
我知道的唯一方法是使用图像...

标签： html css transparency border

【解决方案1】：

您可以使用这样的边框制作凹角...

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

jsFiddle.

参考 jsFiddle 并注意顶角让背景通过。只需将此示例调整到您的网站即可。

【讨论】：

不错。几乎是一样的。但你比我快。

【解决方案2】：

给你，伙计。 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}

【讨论】：