SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    edmonton
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slanted corner on bordered box

    Hi there,

    I've been reading sitepoint for quite a while and Now i need your help . I've come accross a problem that has just stumped me.

    Basically I'm trying to make a box with a slanted corner (something like the "articles" or "forums" tabs that you see on top of sitepoint pages. the difference is that my box needs to have a border. If I were to put a border around it it will be a square border but i want a slanted border. basicly so the border follows the outline of the slant (along the image its no problem cause hte border will be part of the image) but the problem is that the border will appear "around" the image.

    Ive tried putting 2 boxes inside eachother and using the background image property of the outside one and the border property of the inside one. but the border appears on top of the background image. Even when you change the z-indexes.

    anyone have any ideas?

    Realy would appreciate some help.

    Thx
    Antek.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    I'm not sure if this is what you mean but can't you just use the part of the image that isn't a slant to rub out the rest of the boxes border.

    A very rough example here:

    http://www.pmob.co.uk/temp/slant.htm

    Or you may be able to put this to use:

    http://www.infimum.dk/HTML/slantinfo.html

    Paul

  3. #3
    SitePoint Member
    Join Date
    Oct 2003
    Location
    edmonton
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.pmob.co.uk/temp/slant.htm

    Hi Paul,

    Thx for your prompt reply I think this is exactly what I was looking for. I guess i was trying to do it with background images (cause you can edit them with the style sheet) rather then regular images which have to be included in the html code. But i think I will just use the method you linked to either way.

    Thanks

    Antek

  4. #4
    SitePoint Member
    Join Date
    Mar 2003
    Location
    Queanbeyan, Australia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been playing with this as well. Does not yet work in NETSCAPE, but works well in IE. Look at
    HTTP://www.acom.edu.au/acom.php

    All of the boxes on the screen use background images in a CSS, including the scrollbox that actually works when you click the arrows.
    Craig Rayner
    (We have met the enemy and he is us.)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •