How to create a zig zag banner with css


Tags: css,css3,background

Problem :

I am looking for a way to css a background banner to look like

________
\  hi   |
/_______|

or this

_________
\  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



Solution :

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:

enter image description here

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.


    CSS Howto..

    how to strech select?

    How make text before ul to come in single line in html?

    HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

    How To Select Two classes with CSS?

    How can I center an image with text that follows it using CSS?

    How to apply Sticky Table header design on every ajax refresh which is every 30 seconds?

    how to change css property of 2nd & 6rd DIV using jquery

    How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

    How to determine if CSS has been loaded?

    How to find a div / panel in repeater and apply css?

    How can you keep the “theme” of your website and add new dynamic pages? [closed]

    How to prevent the style added to anchors from footer in JQueryMobile?

    How to Make the Content 100% height and equal height columns in this layout?

    How to break text in a line in a div by css?

    How to alter CSS properties using PHP based on a conditional

    How to set multiple css using jquery animate function

    How can I easily copy the whole CSS file from a website?

    How to set the CSS class name dynamically in LessCSS?

    How to integrate CSS