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.
Please tell me your thoughts regarding this problem.
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.
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.
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).