SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    0 Post(s)
    0 Thread(s)

    Problem with rotated squares - Any ideas?

    Hi there.

    I'm currently building a website for an artist where users can select which design they would like and then select different colours for different parts of the artwork (so they have the ability to personalise their own artwork).

    I would like to acheive this using CSS and possibly a touch of javascript, but can't get my head around a possible solution for this problem.

    Take a look at the attached image to get an idea of what I'm trying to acheive (if the image isn't available it'll just be waiting to be approved by the moderators).

    Basically I want to be able to independantly select different colours for each of the three squares. So for example - you will have the option to select which square you wish to edit, then choose a colour from an available palette.

    The problem I'm having is how this would be acheived which would allow you to still see the square below colour? If the squares were all straight this would be extremely simple by just having 3 divs which you change the background-color of. However, with them being on slants I'm struggling with a way of making this work.

    Does anyone have any possible ideas of how this could be acheived, or should I just do it in flash?

    Thanks in advance.


    EDIT - I've also just added a second image that shows the problem area I'm talking about to try and make this clear (see square_problem_area.gif)
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    You could probably do it using the same techniques used in this example but it looks a bit time consuming. It may be that flash would offer a better solution in this case.


Posting Permissions

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