Creating a more advanced shape

[Martin_Muzatko]

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

[Paulie_D]

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?

[Martin_Muzatko]

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.

[Paulie_D]

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/

[Martin_Muzatko]

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.

[Paulie_D]

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.

[chrisburton]

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.

[Martin_Muzatko]

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!

[Paulie_D]

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.

[chrisburton]

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

[Paulie_D]

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.

[Martin_Muzatko]

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?

[Paulie_D]

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?

[chrisburton]

@Paulie_D? SVG is an element, no?

[dfogge]

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

[Author]

Posts