Creating a more advanced shape
# February 1, 2013 at 8:01 am
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.
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.# 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 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 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.
That’s my understanding but perhaps there is something on the bleeding edge or maybe there is a gap in my understanding.
You must be logged in to reply to this topic.