Making jagged triangle border in CSS

by

You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border.

.header{
    color: white;
    background-color: #2B3A48;
    text-align: center;
}
.header::after {
    content: " ";
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 36px;
    background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%, 9px 27px, 9px 27px;
}
<div class="header"><h1>This is a header</h1></div>

Source: CSS Zigzag Border with a Textured Background

JSFiddle: http://jsfiddle.net/kA4zK/

More Related Contents:

  1. Speech bubble with arrow
  2. Transparent hollow or cut out circle
  3. Control the dashed border stroke length and distance between strokes
  4. How to make 3-corner-rounded triangle in CSS
  5. CSS transparent curved shape with two rounded sides
  6. CSS 3 Shape: “Inverse Circle” or “Cut Out Circle”
  7. Is it possible to create an angled corner in CSS?
  8. How to draw a circle sector in CSS?
  9. How to create a curve on the top of a background?
  10. Outlining and partially filling an SVG Shape
  11. Hexagon shape with CSS3
  12. How can I create a “tooltip tail” using pure CSS?
  13. Align text on slanted line
  14. background image, linear gradient jagged edged result needs to be smooth edged
  15. Segments in a circle using CSS3
  16. How to make a circle around content using CSS?
  17. Adjacent divs with angled borders? [duplicate]
  18. Blocky gradient effect in CSS3
  19. Border within border CSS
  20. Half hexagon shape with one element
  21. How to create an irregular square shape in css?
  22. How to create a radial menu in CSS?
  23. Arrow Box with CSS
  24. Filling water animation
  25. Make CSS3 triangle with linear gradient
  26. Creating an Isoceles Trapezoid shape
  27. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  28. Creating a droplet like border effect in css
  29. Div with cut out edges, border and transparent background
  30. Double curved shape

Leave a Comment