css3 不规则阴影

错误方案 —— 利用box-shadow
在面对规则的矩形或者圆形，用box-shadow生成的投影可以说堪称完美。
但是面对不规则图形，再用box-shadow生成的投影就有点力不从心了。
可以看出，这时圆角矩形的投影打到三角形上面了。在某些情况下看起来可能会有点不那么和谐。

---

正确的方案 —— filter

这里利用伪元素生成小三角形。

<div>Rabbit</div>

div {
    text-align: center;
    line-height: 200px;
    font-size: 40px;
    color: #cffdf8;
    width: 200px;
    height: 200px;
    position: relative;
    background: #216583;
    border-radius: 20px;
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.6));
}
div:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: #216583;
    position: absolute;
    z-index: -999;
    right: -15px;
    top: 20%;
    transform:rotate(45deg);
}