css - 如何使用 CSS 创建锯齿形横幅

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;

技巧当然是，当您使用非常宽的边框时，浏览器必须对元素的 Angular 进行处理。默认情况下，它们被切割成允许您制作您所描述的形状的形状:

在此处查看上面的示例:http://jsfiddle.net/6Z94e/1/

如果您的页面没有白色背景，您可以使用 transparent 作为左右边框的颜色，或者使用 #333 作为右边框颜色如果您正在寻找第一个示例中的形状(jsfiddle 看起来像您的第二个示例)。

要使效果生效，您的 div 必须为 0 像素高。这可以通过将 div 的内容从文档流中提取出来来实现，就像我在示例中所做的那样。