带阴影的三角形

方法一：三角形的阴影使用盒模型阴影 我们不画三角形，直接画一个正方形的盒子，再通过transform属性旋转45度即可，我们再定义一个与容器颜色相同的盒子, 将上半部分盖住就可以啦。

.box { position: relative; width: 200px; height: 100px; background: #ff8605; box-shadow: 2px 2px 2px rgba(0, 0, 0, .2); } .box::before { position: absolute; bottom: -5px; left: 45px; content: ''; width: 10px; height: 10px; background: #ff8605; transform: rotate(135deg); box-shadow: 1px -2px 5px rgba(0, 0, 0, .2); } .box::after { position: absolute; bottom: 0px; left: 40px; content: ''; width: 20px; height: 20px; background: #ff8605; }

方法二：drop-shadow属性才是真正意义上的投影，它只会投影出真实图形的阴影

.box::after { position: absolute; bottom: -9px; left: 45px; content: ''; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #ff8605; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2)); }