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

Question

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

(1) 有没有办法在不使用图片的情况下在 CSS 中创建实用的跨浏览器之字形边框？

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

如果我尝试为之字形边缘和标题元素添加纹理，很有可能纹理将不同步。

(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：

感谢 Ana 提供代码。我接受并改进了它。

http://dabblet.com/gist/3401493

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

Answer 1

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

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

CSS zig-zag 模式的代码是：

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，你可以尝试here：CSS3 PIE或cssSandpaper列出的其中之一

Answer 2

（在现代浏览器中）您可以使用 SVG 创建简单的绘图，并将它们用作嵌入为 data 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 images specs 色标位置不能小于前一个。

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