仅在css或svg webkit中创建一个arrow div

Question

我必须创建一个界面（幻灯片管理），其中幻灯片在方块内预览，略带箭头感觉。 我怎样才能做到这一点？我觉得我已经超过了css的极限 我真的不关心浏览器兼容性，它只是一个webkit平台

一旦我设法获得形状，我认为其余的将是简单的css（边框，阴影，重叠，......）

这是预览：

知道怎么做到这一点？盒子不会总是相同的大小/比例..它们可以是肖像和风景..实际上是什么。 是否可以使用一些基于矢量的掩模层？

Answer 1

好的，我设法按照我想要的方式渲染它，感谢Vals指出我的方向。

结果的小提琴（仅适用于Chrome和移动游猎）：fiddle

我必须使用容器div来应用阴影，因为在阴影渲染后处理剪辑。但容器Div是矩形的，因此简单的阴影不起作用。 css过滤器在这种情况下工作。 对于白色边框也是如此，在另一个div上使用阴影滤镜。

.arrowClip 
{
  -webkit-clip-path: polygon(0 0, 100% 0 , 100% 80%, 50% 100%, 0 80% );
}

.arrowContainer 
{ 
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.9)) ;  
}
.arrowStroke 
{  
    -webkit-filter: drop-shadow(0px 0px 2px rgba(255,255,255,1)) ; 
}