给三角形添加边框阴影

奋斗吧程序媛

于 2023-05-10 17:02:50 发布

阅读量452

点赞数 1

文章标签： css 前端 javascript

原文链接：https://blog.csdn.net/A_Common_Man/article/details/124238270

版权

需求：利用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>

转载自;三角形给三角形添加边框阴影_css 三角形加边框阴影_风哑的博客-CSDN博客