Html 带纹理背景的 CSS 锯齿形边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12031328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Zigzag Border with a Textured Background
提问by ambiguousmouse
I've been working on a header with a zigzag border. One way to do this is to use images to make the zigzag effect.
我一直在研究带有锯齿形边框的标题。一种方法是使用图像来制作锯齿形效果。
(1) Is there any way to create a practical cross-browser zigzag border in CSS without the use of images?
(1) 有没有办法在不使用图像的情况下在 CSS 中创建实用的跨浏览器锯齿形边框？
I am also trying to put a textured background on this header that extends to the zigzags. However, the vertical size of the header may change and I am unable to implement the header as a single image.
我还试图在这个延伸到锯齿形的标题上放置一个带纹理的背景。但是，标题的垂直大小可能会改变，我无法将标题实现为单个图像。
If I try to add a texture to both the zigzag edges and the header element, chances are, the texture will be off sync.
如果我尝试向锯齿形边缘和标题元素添加纹理，则纹理可能会不同步。
(2) Any ideas on implementing a textured background that extends onto the zigzags without being off sync?
(2) 关于在不同步的情况下实现延伸到锯齿形的带纹理背景的任何想法？
My [old] code (along with a texture) is here on jsFiddle.
我的 [旧] 代码（连同纹理）在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" />Edit #1:
编辑#1：
Thank you Ana for the code. I took it and improved upon it.
谢谢安娜的代码。我接受了它并对其进行了改进。
http://dabblet.com/gist/3401493
http://dabblet.com/gist/3401493
I don't think that a consistent background will be possible.
我认为不可能有一致的背景。
回答by Ana
If you are going to use border-image, then it's not a cross-browser solution because IE doesn't support it.
如果您打算使用border-image，那么它不是跨浏览器的解决方案，因为 IE 不支持它。
Also, even though every current browser version except IE9 supports both CSS gradients (which would allow you to get a zig-zag pattern) and border-image, last time I checked (which was quite a few months ago, so better test this again), using gradients for border-imageonly worked in WebKit. Plus, I don't think that even in WebKit this works with more than one gradient (as you can only set one border image and one gradient is one image) and you need two gradients for the zig-zag pattern.
此外，即使除 IE9 之外的每个当前浏览器版本都支持 CSS 渐变（这将允许您获得锯齿形图案）和border-image上次我检查（这是几个月前，所以最好再次测试），使用border-image仅适用于 WebKit 的渐变。另外，我不认为即使在 WebKit 中，这也不能使用多个渐变（因为您只能设置一张边框图像，而一个渐变就是一张图像），并且您需要为锯齿形图案设置两个渐变。
The code for the CSS zig-zag pattern is:
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;
If you want a texture below this that is in sync with this one, then you have to make sure it repeats at the same intervals (40px, but you could also go for 20px).
如果您想要在此下方的纹理与此同步，那么您必须确保它以相同的间隔重复（40px，但您也可以选择20px）。
Edit: regarding polyfills, you could try one of the ones listed here: CSS3 PIEor cssSandpaper
编辑：关于 polyfills，您可以尝试此处列出的其中之一：CSS3 PIE或cssSandpaper
回答by Salman A
(In modern browsers) you can use SVGs to create simple drawings, and use them as CSS background images embedded as data URI.
（在现代浏览器中）您可以使用 SVG 来创建简单的绘图，并将它们用作嵌入为数据 URI 的CSS 背景图像。
Here is what the SVGs look like:
这是 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>Example 1:
示例 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>Example 2:
示例 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>回答by Vadim Ovchinnikov
Improved minimal CSS:
改进的最小 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>If you want to remove duplicate values you can use CSS variables AKA Custom properties. They are working everywhere except IE.
如果要删除重复值，可以使用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>Small note:
小注：
I use zero 0in gradient color-stops to avoid duplicating previous values because according to the CSS3 images specscolor-stop position can't be less than previous one.
我0在渐变色标中使用零以避免重复以前的值，因为根据CSS3 图像规范，色标位置不能小于前一个。
If a color-stop has a position that is less than the specified position of any color-stop before it in the list, set its position to be equal to the largest specified position of any color-stop before it.
如果色标的位置小于列表中它之前的任何色标的指定位置，则将其位置设置为等于它之前的任何色标的最大指定位置。
