css三角形四周阴影

CSS三角形是制作各类菜单、标志、箭头等类别界面中经常使用到的元素，而为这些三角形添加四周阴影能够让设计效果更加出色。简单介绍一下如何通过CSS制作带有四周阴影的三角形。

.triangle {
    width: 0;
    height: 0;
    display: inline-block;
    border: 20px solid;
    border-color: transparent transparent #fff transparent;
    box-shadow: -2px 2px 2px #000000;
} 

下面解释代码中关键部分。

border-color: transparent transparent #fff transparent; 

这一句是实现特定方向三角形的关键，可以查看常驻ON的一篇文章，详细介绍了这部分代码。点此跳转

box-shadow: -2px 2px 2px #000000; 

这一句是为了给三角形添加阴影效果，值得注意的是设置为负数表示阴影在三角形左上方偏移而非右下方。如果需要其他难度系数可以调整数值。

最后就可以愉快的为自己的页面添加漂亮的三角形了。