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.

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:

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..

    PHP: _POST and CSS, how to show an active link

    Applying new css to elements with jQuery, how to add transition?

    How to override css attribute-only style

    How do I center the contents in this div?

    How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

    How to style in IE6 CSS?

    How to put text over Image

    how to flip and rotate an image using css in chrome

    background image shows up on right-click show image, but not on webpage

    How to exclude an HTML element form Ionic CSS

    How do I show divs in an IE print preview page that are programmatically hidden via javascript?

    How can I show a DIV when hovering on a DIV using pure CSS?

    How to create double border which is not touching to edges in pure css?

    How to use Materialize css Tabs in Meteor?

    Hide and show divs with multiple common classes

    How do i wrap a parent div to the width of a child div (dialog)?

    how to target individual elements in grails g:render

    How do I access font features in CSS?

    How can one create horizontal tree view using CSS and HTML?

    How to make a bootstrap modal fade in from the bottom?

    how to remove extra css and js link in twitter-bootstrap-rails

    How can I make an element fit to fill the right part of the window?

    How to put a space between the hover effect in this situation css html php?

    How to adjust height of the div base on contents? [duplicate]

    How to parse css (stylesheet) comments (annotations)?

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    How to center 2 or more divs on the same line? (css)

    How to change cursor on the NextGen Gallery Slideshow in Wordpress

    What is WebKit and how is it related to CSS?

    How does a GPL license restrict commercial web applications? [closed]