Email conversation
| From | Heidi Kellner |
|---|
| To | Me |
|---|
| Subject | Border Styles With Css and Divs |
|---|
| Date | 13 April 2006 17:28 |
|---|
| Attachment | Picture of a border effect, where all four sides of an element have a decorated border |
|---|
Hi Mark:
I came across this page:
http://www.howtocreate.co.uk/tutorials/css/slopes
doing a google search bor div border left style
Very Amazing - the stuff you've done.
What I'm wondering if it is possible to make an outlined box with div tags
that appears to have an angled corner out of it - currently we make kind of
crazy tables to achieve this and I'm thinking it must be possible to do this
without a table.
I'm going to attatch a gif of the kind of box i'm trying to create and see
if you have any magic for this.
Thanks so much in advance.
Heidi
| From | Me |
|---|
| To | Heidi Kellner |
|---|
| Subject | Re: Border Styles With Css and Divs |
|---|
| Date | 13 April 2006 19:53 |
|---|
Heidi,
> What I'm wondering if it is possible to make an outlined box with div tags
> that appears to have an angled corner out of it
Easily, yes.
If the widths of the boxes are fixed, it is _very_ easy. (Unless you are
very comfortable with positioning, I recommend you stick with fixed width
boxes.)
Just make a div that is the desired width, and use a background image that
repeats vertically, to produce the left and right borders. Make the div
relatively positioned. Give it top and bottom paddings to allow space for
the images;
Then put an image inside the div, with its width the same as the div.
Position it absolutely with its top and left set to 0. Create another one
with its bottom and left set to 0. These provide the top and bottom borders.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/