Customizing border properties using zigzag edges

Question

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.

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.

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

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.

Thanks for all the help.

score 2 · Answer 1 · edited May 23 '17 at 11:59

2

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

I have updated it a little to suit your question

FIDDLE

edited May 23 '17 at 11:59

Community

1
1

answered Jul 03 '13 at 17:03

Danield

121,619
37
226
255

score 0 · Answer 2 · edited Jan 14 '16 at 03:16

If you don't care losing support for old browsers, try CSS3 border-image property:

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

See When Can I Use for browser support: http://caniuse.com/#feat=border-image

Otherwise you could add a background to thead and tfooter elements of the table (haven't tried, but this should work). If still no luck with this, try adding an extra element before and after the table element and add background to them.

score 0 · Answer 3 · answered Jul 03 '13 at 17:09

I'd do something like:

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/

score 0 · Answer 4 · answered Jul 03 '13 at 18:28

You can solve this in two ways, both including the :before and :after pseudo elements.

1 (Cross browser compatible):

Get a snippet of the zig-zag background, then repeat it along the x axis in the :before and :after pseudo elements of the element you want the zig-zag borders. For example:

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

2 (CSS3 gradients):

If you use layered linear-gradients on the background like this:

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;

in combination with the :before and :after pseudo elements you can get the result you are looking for.

Check out this FIDDLE.

NOTE: The example will only work for webkit browsers (since I made it as a proof of concept). If you want other browser support you need to add multiple background properties and add the prefixes.

Customizing border properties using zigzag edges

4 Answers4

1 (Cross browser compatible):

2 (CSS3 gradients):

Linked