Создать нерегулярную границу

Question

Я пытаюсь создать нерегулярную границу вокруг div, div будет содержать текст. В настоящее время я использую два разных изображения и делаю их фон сверху и снизу div. Этот метод работает довольно хорошо, но проблема заключается в том, что div может расти, т. Е. Он может иметь переменную ширину и высоту в зависимости от его содержимого. Таким образом, в этом случае использование изображений в качестве фона для достижения этого эффекта более не является жизнеспособным.

Есть ли способ создать нерегулярную границу с помощью CSS и javascript? Очевидно, что граница должна соответствовать переменной ширине и высоте.

Я пытаюсь добиться чего-то подобного, но со всех сторон.

Answer 1

Используйте фоновое изображение для самого DIV и CSS границы образа на границах. Вот пример: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image

Вы также можете использовать 2-3 div для достижения того, что вы пытаетесь сделать. Создайте изображение, которое имеет верхнее украшение, которое вы хотите, и установите его как фоновое изображение. Затем получите еще одно изображение с вашим боковым дизайном, которое повторяется, но не настолько мало, что шаблон становится очевидным, и использовать его как изображение с включенным повтором. Что-то вроде этого

.image-top { 
    background: img(url) no-repeat; 
    min-height: 25px; 
} 
.image-middle { 
    background: img(url2) repeat-y; 
} 

<div class="image-top"> 
</div> 
<div class="image-middle"> 
    content goes here 
</div> 

или

.image-top { 
    background: img(url) no-repeat; 
    min-height: 25px; 
} 
.image-middle { 
    background: img(url2) repeat-y; 
} 
.image-bottom { 
    background: img(url3) no-repeat; 
    min-height: 25px; 
} 

<div class="image-top"> 
</div> 
<div class="image-middle"> 
    content goes here 
</div> 
<div class="image-bottom"> 
</div> 

Answer 2

Я хотел бы попробовать background-size:contain с помощью этого образа, а затем добавить некоторые padding тоже держать текст прочь. Он будет масштабироваться, но он может выглядеть неровным, если поле становится слишком большим. В противном случае вам нужно будет сделать края повторяемыми, что, вероятно, почти невозможно, если вы предоставили изображение.

PS. Напоминает мне о тех днях, когда мы все хотели округлых углов, и теперь мы плоский дизайн едва использует свойство border-radius.