css三角形加阴影效果

CSS三角形加阴影效果，是一种常见的Web界面设计技巧。这种效果通常运用于导航菜单或按钮上，视觉上使这些元素更加醒目。下面就来介绍一下如何实现这种效果。

首先，我们需要一个三角形元素。使用CSS可以很简单地实现这个需求。

 .triangle {
        width: 0;
        height: 0;
        border-top: 10px solid #000;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
    } 

我们使用border属性，将元素的宽和高都设为0，再将顶部的边框设置为黑色，并用透明边框来实现三角形的边缘效果。这样，我们就得到了一个黑色的三角形。

接下来，让我们来加上阴影效果。使用CSS的box-shadow属性即可轻松实现这一效果：

 .triangle {
        width: 0;
        height: 0;
        border-top: 10px solid #000;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    } 

我们通过box-shadow属性，给三角形元素增加了一层阴影。这里的阴影效果中，第一个参数表示阴影位置（x轴和y轴），第二个参数表示阴影模糊半径，第三个参数表示阴影扩散程度，第四个参数表示颜色。

经过上述操作，我们就成功地创建了一个三角形加阴影的效果。