我们在用CSS进行布局时，正常的长方形，正方形，圆形都是比较常见且容易实现的效果，但是如果要实现如下这种类似箭头的多边形该怎么实现呢？

在这里，我们可以利用多重 drop-shadow()来实现这种不规则边框的效果。

代码如下:

div {
    position: relative;
    width: 180px;
    height: 64px;
    background: #fff;

    &::after {
        content: "";
        position: absolute;
        width: 32px;
        height: 64px;
        top: 0;
        right: -32px;
        background: 
            linear-gradient(-45deg, transparent 0, transparent 22px, #fff 22px, #fff 100%),
            linear-gradient(-135deg, transparent 0, transparent 22px, #fff 22px, #fff 100%);
        background-size: 32px 32px;
        background-repeat: no-repeat;
        background-position: 0 bottom, 0 top;
    }
}
div {
    filter: 
        drop-shadow(0px 0px .5px #000)
        drop-shadow(0px 0px .5px #000)
        drop-shadow(0px 0px .5px #000);
}

可以看到，这里我们通过叠加 3 层 drop-shadow()，来实现不规则图形的边框，虽然 drop-shadow() 是用于生成阴影的，但是多层值很小的阴影叠加下，竟然有了类似于边框的效果：