css三角形hover透明边怎么样

CSS三角形是Web开发中经常用到的效果之一，它可以通过一些简单的 CSS 代码即可实现。但是，当我们在三角形上应用了hover效果之后，边线透明度问题却难以解决。

.triangle {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #333;
}

.triangle:hover {
    border-top-color: rgba(51, 51, 51, 0.5);
} 

如上代码所示，我们首先定义了一个基本的CSS三角形，然后在:hover状态下改变border-top-color。但是，当我们在:hover状态下应用透明度时，我们会发现整个边框都变得透明了，不仅仅是我们期望的那一条。

那么，应该如何解决这个问题呢？

.triangle {
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #333;
    position: relative;
}

.triangle:before {
    content: ';
    position: absolute;
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border: 20px solid rgba(51, 51, 51, 0);
    border-top-color: rgba(51, 51, 51, 0.5);
}

.triangle:hover:before {
    border: 20px solid rgba(51, 51, 51, 0.5);
} 

首先，我们为三角形添加了一个相对定位的属性。然后，在:before伪元素中添加了一个绝对定位的div，它将会被放在三角形的上方。此时，在三角形:hover状态下，我们将直接修改:before伪元素中的边框透明度，而不是修改整个三角形的边框透明度。

通过这种方式，就可以解决这个问题了。在hover状态下所达到的效果完全符合我们的期待，整个过程相对简单方便，是实现这种效果的常见方法之一。