CSS Zigzag Border with a Textured Background

by

If you are going to use border-image, then it’s not a cross-browser solution because IE doesn’t support it.

Also, even though every current browser version except IE9 supports both CSS gradients (which would allow you to get a zig-zag pattern) and border-image, last time I checked (which was quite a few months ago, so better test this again), using gradients for border-image only worked in WebKit. Plus, I don’t think that even in WebKit this works with more than one gradient (as you can only set one border image and one gradient is one image) and you need two gradients for the zig-zag pattern.

The code for the CSS zig-zag pattern is:

background: linear-gradient(#BCED91 49%, transparent 49%),
        linear-gradient(-45deg, white 33%, transparent 33%) 0 50%,
        white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%;
    background-repeat: repeat-x;
    background-size: 1px 100%, 40px 40px, 40px 40px;

If you want a texture below this that is in sync with this one, then you have to make sure it repeats at the same intervals (40px, but you could also go for 20px).

Edit: regarding polyfills, you could try one of the ones listed here: CSS3 PIE or cssSandpaper

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. Cut Corners using CSS
  3. Transparent half circle cut out of a div
  4. Can I create a div with a Curved bottom?
  5. How to create a circle with links on border side
  6. How to create uneven rounded sides on a div?
  7. How to make this arrow in CSS only?
  8. Shape with a slanted side (responsive)
  9. CSS Cut out circle from a rectangular shape
  10. CSS3 Transform Skew One Side
  11. How to make a curved edge hexagon by using CSS
  12. How to draw circle in html page?
  13. Responsive CSS Trapezoid Shape
  14. Circular percent progress bar
  15. Generate repeating hexagonal pattern with CSS3
  16. How to create a curve between two gradient using CSS?
  17. How does this CSS produce a circle?
  18. Hexagon shape with a border/outline
  19. How to draw a trapezium/trapezoid with css3?
  20. How to create a transparent triangle with border using CSS?
  21. How to bevel the corner of a block div?
  22. Dynamically aligning pseudo element according to parent height
  23. CSS Speech Bubble with Box Shadow
  24. Center Triangle at Bottom of Div
  25. CSS box shadow around a custom shape?
  26. Skewed Borders on a Div
  27. Pixelated edge around a CSS Circle with overflow: hidden;
  28. Title with bottom border smaller than width
  29. How to create a triangle in CSS3 using border-radius
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment