CSS 带纹理背景的锯齿形边框

Question

我一直在研究带有锯齿形边框的 header。 一种方法是使用图像来制作锯齿形效果。

(1) 有没有什么方法可以在不使用图像的情况下在 CSS 中创建一个实用的跨浏览器之字形边框？

我还试图在这个延伸到锯齿形的 header 上放置纹理背景。 但是，header 的垂直尺寸可能会发生变化，我无法将 header 实现为单个图像。

如果我尝试为之字形边缘和 header 元素添加纹理，则纹理可能会不同步。

(2) 关于实现延伸到曲折而不同步的纹理背景的任何想法？

我的 [旧] 代码（连同纹理）在jsFiddle上。

 body { padding: 20px; } header { width: 240px; background-color: #BCED91; } header:after { content: " "; display: block; position: relative; width: 240px; bottom: -15px; height: 15px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAPCAYAAACWV43jAAAAw0lEQVRIx83RsQ3CMBCF4T83AZKLVOmyBa1HSIlXwKySGaDOBClZAToWQIpETQONyxAS+2J4pe9knd5X9EP7QicPYAsUwBnYaHwqSsd1QGmNv1rjL0AZ3pJTKDTorPGnsUE/tDvg+KsG70D96TiAMKvDbtYDO6Cyxt++LYadKpY8hthNtTaVGHLRJJ3R5mJy0SbVJp9D7FJaSyWXNUk1yGVt0lTyMWK3ZmtLySUnaQy55CZdSi7AHmis8U/+JOGWBji8AaYPVy6VELZvAAAAAElFTkSuQmCC) repeat-x; } img { margin-top: 50px; }

 <header> <br /> <br /> <br /> <br /> </header> <img src="http://i.imgur.com/qKsVr.png" />

---

编辑＃1：

谢谢安娜的代码。 我接受并改进了它。

http://dabblet.com/gist/3401493

我认为不可能有一致的背景。

Answer 1

如果您打算使用border-image ，那么它不是跨浏览器的解决方案，因为 IE 不支持它。

此外，即使除 IE9 之外的每个当前浏览器版本都支持 CSS 渐变（这将允许您获得锯齿图案）和border-image ，但我上次检查时（这是几个月前，所以最好再测试一次)，对border-image使用渐变仅适用于 WebKit。 另外，我不认为即使在 WebKit 中，这也不能使用多个渐变（因为您只能设置一张边框图像，而一个渐变就是一张图像），并且您需要为锯齿形图案设置两个渐变。

CSS 之字形图案的代码是：

background: linear-gradient(#BCED91 49%, transparent 49%),
        linear-gradient(-45deg, white 33%, transparent 33%) 0 50%,
        white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%;
    background-repeat: repeat-x;
    background-size: 1px 100%, 40px 40px, 40px 40px;

如果你想要一个下面的纹理与这个同步，那么你必须确保它以相同的间隔重复（ 40px ，但你也可以选择20px ）。

---

编辑：关于 polyfills，您可以尝试此处列出的其中之一： CSS3 PIE或cssSandpaper

Answer 2

（在现代浏览器中）您可以使用 SVG 来创建简单的绘图，并将它们用作嵌入为数据 URI 的CSS 背景图像。

这是 SVG 的样子：

 body { background: #888; }

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px"> <polygon points="0,4 4,0 8,4" fill="#CC0000" /> </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px"> <polygon points="0,0 4,4 8,0" fill="#CC0000" /> </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px"> <polygon points="0,0 4,4 8,0" fill="#FFFFFF" /> </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="8px" height="4px"> <polygon points="0,4 4,0 8,4" fill="#FFFFFF" /> </svg>

示例 1：

 .zigzag-outside { position: relative; margin-top: 4px; margin-bottom: 4px; background-color: #CC0000; /* example content */ padding: 1em; font: bold medium sans-serif; color: #FFFFFF; } .zigzag-outside:before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 4px; /* red up pointing triangle */ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E"); } .zigzag-outside:after { content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 4px; /* red down pointing triangle */ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C0%204%2C4%208%2C0%22%20fill%3D%22%23CC0000%22%2F%3E%3C%2Fsvg%3E"); }

 <div class="zigzag-outside">Example 1</div>

示例 2：

 .zigzag-inside { position: relative; /* example content */ width: 600px; height: 100px; background-image: url(http://i.stack.imgur.com/uOVfl.jpg); } .zigzag-inside:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; /* white down pointing triangle */ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C0%204%2C4%208%2C0%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E"); } .zigzag-inside:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; /* white up pointing triangle */ background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228px%22%20height%3D%224px%22%3E%3Cpolygon%20points%3D%220%2C4%204%2C0%208%2C4%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E"); }

 <div class="zigzag-inside"></div>

Answer 3

改进的最小 CSS：

 div { background: #1ba1e2; position: relative; } div:after { content: ""; display: block; position: absolute; width: 100%; height: 30px; background: linear-gradient(-45deg, transparent 75%, #1ba1e2 0) 0 50%, linear-gradient(45deg, transparent 75%, #1ba1e2 0) 0 50%; background-size: 30px 30px; } /* Styles just for demo */ h1 { color: #fff; text-align: center; margin: 0; padding: 0.5em; }

 <div> <h1>Zig Zag Borders</h1> </div>

如果要删除重复值，可以使用CSS variables AKA Custom properties 。 他们在除 IE 之外的任何地方工作。

 :root { --background-color: #1ba1e2; --zigzag-item-size: 30px; } div { background: var(--background-color); position: relative; } div:after { content: ""; display: block; position: absolute; width: 100%; height: var(--zigzag-item-size); background: linear-gradient(-45deg, transparent 75%, var(--background-color) 0) 0 50%, linear-gradient(45deg, transparent 75%, var(--background-color) 0) 0 50%; background-size: var(--zigzag-item-size) var(--zigzag-item-size); } /* Styles just for demo */ h1 { color: #fff; text-align: center; margin: 0; padding: 0.5em; }

 <div> <h1>Zig Zag Borders</h1> </div>

小注：

我在渐变色标中使用零0以避免重复以前的值，因为根据CSS3 图像规范，色标位置不能小于前一个。

如果色标的位置小于列表中它之前的任何色标的指定位置，则将其位置设置为等于它之前的任何色标的最大指定位置。

Answer 4

现在使用蒙版和一个渐变，您可以做到这一点。 检查此在线生成器以获取代码： https://css-generators.com/custom-borders/ 。 您可以找到 Zig-Zag 的所有方向和组合

 body { padding: 20px; } header { min-height: 200px; background-color: #BCED91; } img { margin-top: 50px; }.zig-zag { --mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) 50% / 60px 100%; -webkit-mask: var(--mask); mask: var(--mask); }

 <header class="zig-zag"> </header> <img src="http://i.imgur.com/qKsVr.png" class="zig-zag">