需求:利用div边框形成了一个三角形,然后给这个三角形添加边框阴影
解决方法:利用filter这个css3属性,配合属op-shadow实现效果
首先弄一个普通的三角形出来:
可以发现:通过设置div边框得到的三角形,设置边框阴影的时候,会给原来的div盒子设置,这是因为box-shadow这个属性本来就是盒子阴影,而不能给单一的边框设置
要想给三角形设置边框阴影,就需要用到filter这个属性:
可以看到,不仅显示出来的三角形映射了阴影,而且文字也有了阴影效果。
代码:
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 0px;
height: 0px;
margin: 50px auto;
border-top: 100px solid pink;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid transparent;
/* 利用滤镜filter,添加投影 */
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .4));
}
</style>
以上就是解决 给三角形添加边框阴影 的答案了