Grow your CSS skills. Land your dream job.

div text areas with slanted edges??

  • # June 8, 2012 at 4:24 pm

    does anyone know a better (faster) method for doing this than THIS: http://meyerweb.com/eric/css/edge/slantastic/demo.html. does css3 have anything good. i found this http://jsfiddle.net/mdQzH/, but it doesn’t seem to angle the text.

    # June 9, 2012 at 9:42 am

    Neither of those links is working
    Try: http://meyerweb.com/eric/css/edge/slantastic/demo.html and http://jsfiddle.net/mdQzH/

    However, what is it you want to achieve? There is no slanted text in the example.

    # June 9, 2012 at 10:42 am

    @Paulie_D: right that’s weird about the links not working. i also found the links that you did. and here’s another: http://jsfiddle.net/mdQzH/. the problem with these solutions for me is as you said that they text is not slanted. i found another possibility there that uses jquery i think to do what meyer does: http://jsfiddle.net/billymoon/AvmE8/. still, i’m wondering if there isn’t a better solution out there or if css3 addressed it in other ways.

    # June 9, 2012 at 12:01 pm

    I still don’t understand what it is you want to achieve. Should there be more text just within the red area or should the text be at some sort of angle?

    A single word (such as you have) doesn’t mean anything.

    __
    # June 9, 2012 at 9:28 pm

    @ethanmiller: you’re putting punctuation (periods, commas) immediately after your URLs. These are legal characters, so they’re being preserved – but in this case, they’re not supposed to be part of the URL, so you end up with broken links. Use a space after your URLs. Either that, or actually mark up a hyperlink (e.g., example.com.).

    When you say you want the text “slanted,” do you mean that you want the text margins to follow the slant of the side (as this one does)?

    # June 10, 2012 at 3:39 am

    Look, it’s a nice effect but the amount of extra ‘stuff’ that you have to do seems a little much for something most users aren’t going to notice. Anyway, that’s my 2c.

    If they ever get implemented CSS Regions will do all this for you. I’d wait for technology to catch up with design….it’s getting there

    # June 10, 2012 at 6:20 am

    @traq: thanks for the tip on the urls. i will just make them links in the future. looks nicer anyway. so yes that is exactly what i need to do–have the text (appear to) follow the edge of the slanted side of the div. here is a sample of what i want it to look like from a finished design.

    @Paulie_D: i hear you. this was my reaction too, but the client’s design may demand that i do this. just looking for the most efficient way to do it. it’s seeming as if there is no quick way, and that, as you said, it may require lots of extra “stuff.” i’ll keep lookin’ though.

    __
    # June 10, 2012 at 11:31 am

    Add the extra stuff via javascript (don’t hard-code it, whateveryoudo). I think the link I mentioned is probably your “best bet.”

    # June 15, 2012 at 12:33 pm

    here is a round-up of some related methods for achieving the slanted text wrap. none of them particularly slick i’d say.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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