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 find resources(CSS , JS Etc) that are blocking in Chrome

    How to indent a data table with CSS? [closed]

    How to apply background-color: css only in a webkit browser

    How to style one react component inside another?

    How to make button that changes grid dimensions using JS?

    Angular Material Flexbox - How to add margin between wrapped rows?

    How long can a CSS selector be?

    How i can put a picture above a border in css?

    How to expand link on hoover? Add “<” “>” symbols around link?

    How to create a absolute element overlapping several rows in a calendar (table) design?

    How do I overlap PNG images for a “build your own t-shirt” product display page - javascript/css/asp

    how do i css position this divs according to my layout picture?

    How do I get rid of the last tr td bottom border using css?

    CSS display table - How to have 2 fixed and one flexible column

    how to show limited text in css [closed]

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    How can I position list in
    ?

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS

    How to avoid double borders on list of divs

    how to use css to style a descendant (not a direct child) of an element?

    HTML/CSS How to make a menu closed and then use class=“active”

    Html/Css - How to get an image to stretch 100% width of a container then display another image over it?

    How to place three div tags one below another?

    How can I properly create a contenteditable “Font Tester” type editor with CSS classes applied by JQuery?

    How to select the specific position element in the certain class in CSS

    How to Vertically Center Images on a Line?

    php css how to change name color based on membership?

    How to draw rotated element as backgorund in HTML

    How to let the users style a web component with their own CSS?

    How can I target these children divs with one selector?