带纹理背景的 CSS 锯齿形边框
Posted
技术标签:
【中文标题】带纹理背景的 CSS 锯齿形边框【英文标题】：CSS Zigzag Border with a Textured Background 【发布时间】：2012-08-20 01:23:42 【问题描述】：我一直在研究带有锯齿形边框的标题。一种方法是使用图像来制作锯齿形效果。
(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
我认为不可能有一致的背景。
【问题讨论】：
您的 dabbet 链接已失效，您可以在这里复制代码吗？ 【参考方案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列出的其中之一
【讨论】：
使用 css3 创造这种曲折的巧妙方法！但是，似乎图像不能用于背景（第一个线性渐变）。我想除非项目的高度是恒定且可预测的，否则制作连续纹理是不可行的。另外，是否有一个 JS polyfill 可以在 IE8 和 IE9 中进行这项工作？ 您可以删除第一个线性渐变并在之字形后面使用图像或其他渐变 - 就像这样 dabblet.com/gist/3401443 。有很多事情可以用它来完成。关于 polyfill，您可以查看此处列出的 css3clickchart.com/#linear-gradient（页面左下角） 我明天试试 CSS Pie 和 cssSandpaper。但至于背景，我想把它放在绿色部分本身，但似乎用线性渐变，这是一个失败的原因。尽管如此，这是一个很好的方法。谢谢！ @Ana 你怎么做上下之字形？【参考方案2】：（在现代浏览器中）您可以使用 SVG 创建简单的绘图，并将它们用作嵌入为 data URI 的 CSS 背景图像。
以下是 SVG 的外观：
body
background: #888;
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<polygon points="0,4 4,0 8,4" fill="#CC0000" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<polygon points="0,0 4,4 8,0" fill="#CC0000" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<polygon points="0,0 4,4 8,0" fill="#FFFFFF" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
<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>【讨论】：
【参考方案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 色标位置不能小于前一个。
如果色标的位置小于列表中任何色标的指定位置，则将其位置设置为等于其之前任何色标的最大指定位置。
【讨论】：
这段代码效果很好，但我希望有办法在之字形边框下方添加阴影。 @andreszs 您能否提出单独的问题并将链接发送到此处？以上是关于带纹理背景的 CSS 锯齿形边框的主要内容，如果未能解决你的问题，请参考以下文章
由于边框半径为 50% 的包装元素上的背景颜色而显示锯齿状“边框”；
如何在不使用边框和图像的情况下在 div 上制作 CSS 三角形背景？ [复制]
Unity 3D 游戏通用系统设置页面,自定义按键设置,背景虚化,图像设置,亮度对比度饱和度音量调节,分辨率窗口化,帧率垂直同步,抗锯齿,阴影质量,纹理质量设置