Настройка свойства границы, используя зигзагообразные края

Question

Я пытаюсь создать веб-страницу, которая выглядит как, как на этом сайте:

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

Обзор почему мне нужен дизайн статичным: я пытаюсь создать веб-сайт, который имеет ту же концепцию, что и веб-сайт электронной торговли. Поэтому каждый раз, когда я обновляю новый элемент в моем списке, он будет отображаться внутри таблицы и так далее.

Я попытался создать изображение с этим дизайном, используя фотошоп (тот, который посередине с белым фоном и заостренными краями сверху и снизу), но результат в том, что изображение статично и динамически не изменяется, когда содержимое страницы меняется.

Я не знаю, могу ли я реализовать проект, настроив границы, используя чистый HTML-код.

Я попытался использовать свойство border-изображения CSS, но оно по-прежнему имеет горизонтальные границы по краям. Я также использовал свойство background image, но результат в том, что он является статическим и не изменяется при изменении обновления в элементах.

Спасибо за помощь.

Answer 1

Если вы не заботитесь потери поддержки старых браузеров, попробуйте CSS3 border-image свойство:

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

См Когда я могу использовать для поддержки браузера: http://caniuse.com/#feat=border-image

В противном случае вы можете добавить фон thead и tfooter элементы таблицы (не пробовал, но это должно работать). Если вам все равно не повезло, попробуйте добавить дополнительный элемент до и после элемента table и добавить к ним фон.

Answer 2

Отъезд this answer. Для получения этого эффекта используется linear-gradients.

Я обновил его немного, чтобы удовлетворить ваш вопрос

FIDDLE

Answer 3

Я хотел бы сделать что-то вроде:

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/

Answer 4

Вы можете решить эту проблему двумя способами, как в том числе псевдо элементов :before и :after.

1 (кросс-браузер совместимый):

Получить фрагмент зигзагообразной фона, а затем повторите его вдоль оси х в :before и :after псевдо элементов элемента, который вы хотите зигзагообразные границы.Например:

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

2 (CSS3 градиентов):

Если использовать слоистые linear-gradient с на фоне как это:

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.

ПРИМЕЧАНИЕ: Пример будет работать только для веб-браузеров (поскольку я сделал это как доказательство концепции). Если вам нужна другая поддержка браузера, вам нужно добавить несколько свойств фона и добавить префиксы.