CSS三角形是制作各类菜单、标志、箭头等类别界面中经常使用到的元素,而为这些三角形添加四周阴影能够让设计效果更加出色。简单介绍一下如何通过CSS制作带有四周阴影的三角形。.triangle { wid
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;
这一句是为了给三角形添加阴影效果,值得注意的是设置为负数表示阴影在三角形左上方偏移而非右下方。如果需要其他难度系数可以调整数值。
最后就可以愉快的为自己的页面添加漂亮的三角形了。
粉丝
0
关注
0
收藏
0