I have this page mockup.
How do I realize that cut-Out border on the left?
thanks
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I have this page mockup.
How do I realize that cut-Out border on the left?
thanks
There are several possible solutions to this question:
Just use a triangle graphic.
Easy, obvious answer. Probably not what you were looking for, though.
Use a filled in square div, and rotate it 45 degrees.
It works, but is probably overkill for something so simple. Plus rotation can be a bit painful in older versions of IE (it works, but the
filtersyntax is horrible, and the default rotation point is different from all other browsers, so it can be hairy to get it right). Probably too much effort for a simple effect like this.Use the CSS triangular-borders hack to make triangles.
It’s a bit hacky, but it works well. Read more about it here: http://jonrohan.me/guide/css/creating-triangles-in-css/
Use SVG.
SVG is an XML-based vector graphics format. It is trivial to create something like this in SVG. This would be a great solution, except that IE8 and earlier don’t support SVG. Fortunately though, the do support VML, a competing format (IE9 supports SVG, so VML is going to die, but we need to deal with it for the time being). A good solution to this is to use one of the javascript libraries that do SVG-VML conversion on the fly. There’s several of them – try this one for example: http://code.google.com/p/svg2vml/. Or you can use the Raphael library to draw in either SVG or VML using javascript.
Which one of these solutions you use is up to you; it depends on what browsers you want to support, whether you’re happy with using Javascript, whether you want to avoid adding unnecessary graphics, etc.
I would suggest that the CSS triangular borders hack is probably the best solution for the time being. In the future, SVG will be a better answer, but for now the fact that IE8/7/6 don’t support it is a bit of a killer.
The only problem with the triangular borders hack is that it doesn’t work in 100% IE6 (see the page linked above for details on that), but even then it’s usable. And frankly, I’d just drop support for IE6 anyway.