Grow your CSS skills. Land your dream job.

how to create special div shapes?

  • # June 25, 2013 at 3:46 pm

    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

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

    # June 25, 2013 at 4:15 pm

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

    SVG or Canvas maybe…

    # June 25, 2013 at 7:16 pm

    O I got it. It’ll take me a few days to figure out probably. What do you think I should charge for this?

    # June 26, 2013 at 5:21 am

    >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

    > 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

    >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

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

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

    # June 26, 2013 at 9:13 am

    awesome )))))))))

    # June 26, 2013 at 9:42 am

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

    # June 26, 2013 at 10:46 am

    ok…first off @hugogiraudel i love you lol second when i load that into my browser it only gives me this :

    %ul.round -(1…7).each do |i| %li.slice %div.segment

    # June 26, 2013 at 10:49 am

    no image comes up lol…. lol i just need the pic to come up so ican add the hover and anchor links and jquery to it

    # June 26, 2013 at 10:50 am

    and as usual i know one of you is going to tell me something and im going to feel like an idiot but im so thankful for u guys im learning sooooo much lol

    # June 26, 2013 at 10:50 am

    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:51 am

    thanks paulie d…..ok but what do i do to make this work in a normal html file?

Viewing 15 posts - 1 through 15 (of 50 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".