如何用css创建一个zig zag横幅

Question

我正在寻找一种方法来css背景横幅看起来像

________
\  hi   |
/_______|

或者

_________
\  hi   /
/_______\

所以基本上封闭的内容可以有背景颜色，并且侧面会有凹面。 我需要一个简单的想法，如何用css

完成这个

它看起来应该与此相似。减去折叠。 http://rfclipart.com/free/straight-banner-ribbon-607-vector-clipart.html

Answer 1

您可以使用非常大的边框伪造此效果：

border-left: 20px solid white;
border-right: 20px solid white;
border-top: 20px solid #333;
border-bottom: 20px solid #333;

当然，当您使用非常宽的边框时，浏览器必须对元素的角落执行某些操作。默认情况下，它们被切割成允许您制作您正在描述的形状的形状：

  

请参阅上面的示例，如下所示：http://jsfiddle.net/6Z94e/1/

如果您的页面没有白色背景，则可以使用transparent作为左边框和右边框的颜色;如果您正在寻找，则可以使用#333作为右边框颜色你的第一个例子中的形状（jsfiddle看起来像你的第二个例子）。

要使效果起作用，您的div必须为0像素高。这可以通过将div的内容从文档流中拉出来完成，就像我在示例中所做的那样。