带有多个边框的CSS Tucked Corner伪元素

Question

我正在尝试完成我在photoshop中概述的设计。

红色圆圈位。我知道如何使用伪相元素进行折角效果，它是45度的边框，它拥有我。

我可以做任何事情但是这个边界，除了我已经使用的:before和:after之外，我不想再包含其他元素。

任何人都可以仅使用:before和:after重新创建该图片中显示的内容，还是我被迫拥有另一个单独的div？

Jsfiddle：http://jsfiddle.net/NcQWS/