Customizing
borders using CSS

Question

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

enter image description here

I tried creating an image with that design(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 <div> borders or upload the design as a background image then dynamically create it.

Thanks for all the help.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-image — CBroe, Jun 28 '13 at 10:39
see this [LINK](http://stackoverflow.com/questions/13774952/making-jagged-triangle-border-in-css) — Aravind30790, Jun 28 '13 at 10:43

Yotam Omer · Answer 1 · 2013-06-28T11:14:25.773

3

If you don't want to use CSS3 (for more browser support) use the following structure:

<div class="conatiner">
    <div class="pointyHeader"></div>
    <div class="content">
         your dynamic content here
    </div>
    <div class="pointyFooter"></div>
</div>

where pointyHeader and pointyFooter have a fixed height and background image.

Working jsFiddle

edited Jun 28 '13 at 11:14

answered Jun 28 '13 at 10:44

Yotam Omer

15,310
11
62
65

score 0 · Answer 2 · answered Jun 28 '13 at 10:45

0

I thought of a .box { position: relative; } and a .top { position: absolute; top: 0; } and same with bottom .bottom { position: absolute; bottom: 0;}

check it here: http://jsfiddle.net/DyG8F/

answered Jun 28 '13 at 10:45

bboy

1,357
2
15
31

Customizing borders using CSS

2 Answers2

Customizing
borders using CSS