【问题标题】：Customizing border properties using zigzag edges使用 zigzag 边缘自定义边框属性
【发布时间】：2026-02-10 14:45:02
【问题描述】：

我正在尝试创建一个类似于此站点的网页：

http://dribbble.com/shots/805937-Minimalist-invoice

为什么我需要设计是静态的概述：我正在尝试创建一个与电子商务网站具有相同概念的网站。所以每次我更新列表中的新项目时，它都会显示在表格中等等。

我尝试使用 Photoshop 使用该设计创建图像（中间的图像具有白色背景和顶部和底部的尖边），但结果是图像是静态的，并且在页面发生变化。

不知道能不能用纯HTML代码自定义边框来实现设计。

我尝试使用 CSS 的 image-border 属性，但它的边缘仍然有水平边框。我还使用了背景图像属性，但结果是它是静态的，并且在项目中的更新更改时不会更改。

感谢大家的帮助。

【问题讨论】：

标签： css

【解决方案1】：

查看this answer。它使用linear-gradients 来产生这种效果。

我已经对其进行了一些更新以适应您的问题

FIDDLE

【讨论】：

【解决方案2】：

我会这样做：

html:

<div class="invoice">
    <div class="topEdge">
    </div>
    <div class="invoiceContent">
        <!--prices or whatever markup you want-->
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
        <p>$1.40</p>
    </div>
    <div class="bottomEdge">
    </div>
</div>

css:

.invoice {
    width: 400px;
}

.topEdge {
   height: 20px;
   background: red; /* replace red with your top edge background image */
}

.bottomEdge {
   height: 20px;
   background: blue; /* replace blue with your top edge background image */
}

http://jsfiddle.net/KFTzc/

【讨论】：

【解决方案3】：

您可以通过两种方式解决此问题，包括:before 和:after 伪元素。

1（跨浏览器兼容）：

获取 zig-zag 背景的 sn-p，然后沿 x 轴在您想要 zig-zag 边框的元素的 :before 和 :after 伪元素中重复它。例如：

.zig-zag-element:after{
    content: ' ';
    width: 100%;
    display: block;
    background: url('/path/to/zig-zag.png') repeat-x;
}

2（CSS3 渐变）：

如果你像这样在背景上使用分层的linear-gradients：

background: 
   linear-gradient(135deg, #FCFCFB 25%, transparent 25%),
   linear-gradient(225deg, #FCFCFB 25%, transparent 25%),
   linear-gradient(315deg, #8CCEE8 25%, transparent 25%) -7px 0,
   linear-gradient(45deg, #8CCEE8 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #DCDCDB;

结合:before 和:after 伪元素可以得到你想要的结果。

看看这个FIDDLE。

注意：该示例仅适用于 webkit 浏览器（因为我将其作为概念证明）。如果您想要其他浏览器支持，您需要添加多个背景属性并添加前缀。

【讨论】：

【解决方案4】：

如果您不在乎失去对旧浏览器的支持，请尝试 CSS3 border-image 属性：

http://css-tricks.com/understanding-border-image/

查看何时可以使用浏览器支持： http://caniuse.com/#feat=border-image

否则，您可以为表格的thead 和tfooter 元素添加背景（尚未尝试，但这应该可以）。如果仍然没有成功，请尝试在 table 元素之前和之后添加一个额外的元素并为其添加背景。

【讨论】：