使用锯齿形边缘自定义边框属性 [英] Customizing border properties using zigzag edges

问题描述

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

I am trying to create a web page that looks like like in this site:

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

为什么我需要静态设计的概述:我正在尝试创建一个与电子商务网站具有相同概念的网站.因此，每次更新列表中的新项目时，它都会显示在表格中，依此类推.

Overview of why I need the design to be static: I am trying to create a website that has the same concept as that of an ecommerce website. So every time I update a new item on my list, it will be displayed inside a table and so on.

我尝试使用photoshop(具有中间白色背景和顶部和底部尖锐边缘的photoshop)以这种设计创建图像，但结果是该图像是静态的，并且当图像的内容不动态变化时，页面更改.

I tried creating an image with that design using photoshop(the one in the middle with a white background and pointy edges on the top and bottom) but the result is that the image is static and does not dynamically change when the content of the page changes.

我不知道我是否可以通过使用纯HTML代码自定义边框来实现设计.

I do not know if I can implement the design by customizing the borders using pure HTML code.

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

I tried using the image-border property of CSS, but it still has horizontal borders on the edges. I also used the background image property, but the result is that it is static and does not change when an update in the items changes.

感谢所有帮助.

推荐答案

查看此答案.它使用 linear-gradients 产生此效果.

Check out this answer. It uses linear-gradients to produce this effect.

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

I have updated it a little to suit your question

字段

FIDDLE

这篇关于使用锯齿形边缘自定义边框属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！