Grow your CSS skills. Land your dream job.

Creating a more advanced shape

  • # February 1, 2013 at 8:01 am

    Hi there!
    I am currently trying a new concept for my webfolio.
    What I am actually trying to achieve is something I can’t achieve with CSS alone.
    As you can see in this [http://i.imgur.com/J5dVWbo.jpg](http://i.imgur.com/J5dVWbo.jpg “Image”), I want to create scalable containers for my content. I do not really care about the support because it is just a project to push CSS and HTML to their limits.
    First I thought about using SVG – they are scalable and I love creating vectors. http://emacsformacosx.com/ was a great example how useful it can be.
    Then again I thought about the new HTML5 Canvas – however, javascript is NOT my strength, and also I have no idea if it could fit as a container for text and images.
    Whereas I guess I can’t avoid javascript.

    Please tell me your thoughts regarding this problem.

    Best regards
    Martin Muzatko

    # February 1, 2013 at 10:44 am

    I’m unclear on what it is you are trying to do.

    At the moment, you can’t make HTML containers that are anything but rectangular. They might not look it…but they are.

    Anything else, SVG, Canvas is just something rendered inside a (still) rectangular container…or have I misunderstood?

    # February 1, 2013 at 11:53 am

    I am sorry for being unclear.
    I am trying to create a more creative box. Meaning: adding some style to it which is not possible with CSS. (AFAIK: CSS does not support 45 degree corners like I showed on this image: http://i.imgur.com/J5dVWbo.jpg .
    I would love to create such thing without the need of any graphic tools /shops whatsoever.
    SVG comes here in handy, but I am not 100% sure, if this is a good approach for such a project. I humbly ask you for information, or what you consider as a good method to create an unusual shaped box and still maybe have the advantages of using CSS.

    Thank you in advance.

    # February 1, 2013 at 11:57 am

    CSS certainly can create 45 degree angles it just does it with borders and/or pseudo elements.

    As I said though, whatever technique you use CSS/image/JS it’s not going to be apllied to anything other than a rectangle that will hold content.

    http://jsfiddle.net/Paulie_D/AQFKG/2/

    # February 1, 2013 at 12:25 pm

    Of course I know this kind of technique :).
    Although I consider this as useless, because I can’t change the color of the background or border without screwing the rest of it. What I mean is: I can’t have diagonal borders. I did know about the triangle trick, but unfortunatly that allows only one-colored boxes.
    As I said, maybe SVG could be a possible solution to get full control of the shape.
    I do not really care about that in the end it is a rectangular box, but I would love to create the boxdesign without being restricted to one color. I hope you get an idea of what I try to achieve.

    Thank you a lot and best regards.

    # February 1, 2013 at 1:10 pm

    Perhaps a color image of what you are after would help?

    Frankly, I’m not seeing any difference in maintaining CSS and an SVG/Canvas.

    # February 1, 2013 at 1:42 pm

    I’m almost positive you can create this with CSS. But I doubt the browser support is that good (IE specifically).

    Edit: Oops. I see @Paulie_D confirmed it.

    # February 1, 2013 at 2:26 pm

    Okay, I try to make myself clear.
    I already showed you that sketch I created.
    All I was asking for is a possibility to create a box that I am able to add polygons (which SVG is capable of), so I am able to control experimental shapes that are not rectangular or completly round with border-radius.
    Here again is the Image: http://i.imgur.com/x4y1zkO.jpg
    Unfortunatly all those CSS-Tricks won’t help me because then I can’t put it as a transparent box on a background (in the jsfiddle you sent me – this wasn’t possible).

    I hope I made myself a bit clear now. Thank you!

    # February 1, 2013 at 2:36 pm

    Nope…still not clear.

    All the elements will be boxes

    You can fake shapes with fancy colors, borders, pseudo elements and backgrounds but they will still be a rectangles.

    At least until something like CSS Regions comes along.

    # February 1, 2013 at 2:42 pm

    @Paulie_D Is he asking a way to create that shape so his content flows inside of it?

    # February 1, 2013 at 2:52 pm

    TBH, I’m not sure but I would assume so.

    I’m not entirely sure whether he wants to style a rectangle to look like that shape or actually have a blank ‘shape’ element that he can style.

    AFAIK, the second option doesn’t exist yet.

    # February 1, 2013 at 3:06 pm

    I am very sorry for being so unclear on my very first day in this forum.
    As Paulie_D mentioned, the second option is what I was searching for.

    I know that the second option is with css alone not possible, but with other tools? SVG? Canvas?

    # February 1, 2013 at 3:16 pm

    AFAIK, SVG can’t create an element, neither can Canvas

    SVG is just a graphic that has to sit in (or behind) an element.

    Canvas is just a rectangular element which is drawn on using javascript.

    That’s my understanding but perhaps there is something on the bleeding edge or maybe there is a gap in my understanding.

    Anyone?

    # February 1, 2013 at 3:31 pm

    @Paulie_D? SVG is an element, no?

    # February 1, 2013 at 3:52 pm

    technically, SVG is actually a markup language used to create vector graphic elements.

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

You must be logged in to reply to this topic.

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