How to create a zig zag banner with css
I am looking for a way to css a background banner to look like
________ \ hi | /_______|
_________ \ hi / /_______\
So basically the closed content can have a background-color, and would have a concave on the side. I need a brief idea how to accomplish this with css
it should look similar to this. minus the folding. http://rfclipart.com/free/straight-banner-ribbon-607-vector-clipart.html
You can fake this effect by using very large borders:
border-left: 20px solid white; border-right: 20px solid white; border-top: 20px solid #333; border-bottom: 20px solid #333;
The trick is of course that, when you're using very wide borders, the browser has to do something with the corners of your element. By default, they are cut in a shape that allows you to make the shape you're describing:
See how the example above looks here: http://jsfiddle.net/6Z94e/1/
You can use
transparent as a color for the left and right borders instead if your page doesn't have a white background, or
#333 for the right border color if you're looking for the shape in your first example (the jsfiddle looks like your second example).
For the effect to work, your div has to be 0 pixels high. This can be accomplished by pulling the div's contents out of the document flow, as I've done in the example.