具有动态背景的CSS中穿孔样式边框

Question

我正在创建一个优惠券预览(苹果存折风格)。为了让它“感觉”像一个真正的优惠券，我希望顶部和底部的边框有穿孔的风格(小三角形)。如下所示：

​

​

我试着用一个小的三角形图像作为背景图像--在边界上反复出现，但是这个解决方案不可能一直有效。页面背景可以是动态的，然后三角形图像不能具有与所有可能的背景都很好的颜色。

有任何CSS方法来创建这样的边框吗？

Answer 1

谢谢你的回答。

我只是以一种“不太好的方式”实现了我想要的。我使用了许多引导三角形图标，所有的排列和关闭(使用CSS)。这样，我就可以用优惠券的颜色来着色三角形(穿孔的边框)，它们之间的背景仍然是可见的。

Answer 2

试着使用png透明bg的绝对位置后/前。

Answer 3

假设你只想要基本的穿孔边框，你可以使用

.class{
   border:1px dotted #red;
}