CSS3 边框(箭头)- 一个 div 中是否可能有 "two"箭头？

Question

我有一个 PSD 布局要开发，还有一些东西，比如“卡片”，我很好奇我是否可以在没有图像的情况下只使用 CSS3 边框来做到这一点。

http://i.imgur.com/NSZYPsh.png (这些盒子应该是什么样子)

“插入”箭头应该是透明的(因为“卡片”后面有一个全屏背景图像)。

我试过使用 cssarrowplease.com，但无法正常工作，所以我想问问这是否可行？

如果是:如何？我在 cssarrowplease.com(在开发人员控制台中)尝试了几件事，但无法向框中添加多个箭头，而且透明度也不起作用。

感谢任何帮助!

Answer 1

body{
  background-color:gray;
  padding:20px;
}

<!-- The best solution to this is to build polygons with SVG, like this -->

<svg height="300" width="400">
  <polygon points="0 100,200 100,200 0,0 0,50 50" 
  style="fill:white;stroke:#0c6868;stroke-width:6" />
</svg>