Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › how to create special div shapes?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 22 total)
1 2
  • Author
    Posts
  • June 25, 2013 at 3:46 pm #45839
    rwchampin
    Participant

    https://docs.google.com/document/d/1N7M_nz3c8xv42XXYXc_1xmi9zJroG_C4sKVableahGE/edit?usp=sharing

    above is a picture of arrows that create a circle///but they are all touching…and i need to make each individual arrow turn into a link and also when i hover over each individual arrow i need to be able to change the color…suggestions?

    June 25, 2013 at 4:01 pm #140373
    seanallen007
    Member

    maybe try a background image for the arrows and then animate different a:hover effects?

    June 25, 2013 at 4:15 pm #140366
    Paulie_D
    Member

    Yeah….pretty sure that this isn’t possible with CSS alone.

    SVG or Canvas maybe…

    June 26, 2013 at 5:21 am #140475
    Paulie_D
    Member

    >What do you think I should charge for this?

    No idea…how much do you think you can get away with?

    Frankly, I don’t see how you can charge for ‘figuring out time’…but that’s between you and the client.

    June 26, 2013 at 7:41 am #140491
    Kitty Giraudel
    Participant

    > Yeah….pretty sure that this isn’t possible with CSS alone.

    Doable with multiple elements and CSS transforms.

    June 26, 2013 at 8:01 am #140492
    Paulie_D
    Member

    >Doable with multiple elements and CSS transforms.

    Hmmm, I suppose so…in theory…but it would be fugly trying to make even one curved arrow which is also an anchor link and has a hover state.

    Assuming that the arrows are all the same, you could define that shape as an SVG ‘def’ and then re-use it and just position/transform each one until you get a circle type thing.

    June 26, 2013 at 9:08 am #140497
    Kitty Giraudel
    Participant

    http://codepen.io/thebabydino/pen/2950ac8b2610ce67207541736245924c

    Done by Ana Tudor (@thebabydino). Thank her on Twitter. :)

    June 26, 2013 at 9:13 am #140498
    Kuzyo
    Participant

    awesome )))))))))

    June 26, 2013 at 9:42 am #140503
    Paulie_D
    Member

    Awesome indeed…now add the anchor links and hover states…fugly I tell you. :)

    June 26, 2013 at 10:50 am #140539
    Paulie_D
    Member

    Yes, the Codepen is written in HAML and SCSS.

    If you click on the word HAML or SCSS it will show you the HTML & CSS.

    June 26, 2013 at 10:52 am #140542
    Paulie_D
    Member

    Copy the HTML and CSS to the relevant files…should work.

    June 26, 2013 at 11:04 am #140545
    Paulie_D
    Member

    My guess is that you are copying the HAML etc and not the HTML

    How about this:http://codepen.io/Paulie-D/pen/pIgai

    June 26, 2013 at 11:18 am #140549
    Paulie_D
    Member

    Unless you can show us a live page…I don’t think we can help you.

    June 26, 2013 at 11:22 am #140550
    Kitty Giraudel
    Participant

    Which browser do you use?

    June 26, 2013 at 11:32 am #140556
    Kitty Giraudel
    Participant

    Works on Chrome.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 22 total)
1 2
  • The forum ‘CSS’ is closed to new topics and replies.