1

I'm working on site where I put something in a design I'm having a bit of trouble with. I put a repeating triangle pattern at the top and bottom of a div and this throwing me for a little bit of a loop.

You see a lot of sites with SVG's at the top and bottom and I've noticed that a lot of them are a single contiguous shape, such as a long wave, or a single slant but in this case I'd like to have a single triangle that's approximately 150px high and 75px wide as the base shape and have it repeat horizontally to fill the width of the containing element (let's say a div) and be anchored to the top and/or bottom.

horizontally repeating SVG

I'm not sure how to approach this and am in search of suggestion for how to implement this on a website.

Hunter Nelson
  • 1,707
  • 3
  • 20
  • 37
  • Just a note, I know how to create SVGs in Adobe Illustrator and extract their code. – Hunter Nelson Jun 07 '21 at 19:27
  • if it's about a trianlge, you don't need SVG. – Temani Afif Jun 07 '21 at 19:34
  • 1
    You've closed this as there's another answer, but it uses a pseudo-element. If you want a cleaner way, how about this? body { margin:0; min-height:100vh; background-color:#005b79; background-image:url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-repeat:repeat-x, repeat-x; background-position:top, bottom; } – Kate Jun 07 '21 at 19:50
  • It was closed by someone else and marked as a duplicate. The duplicate answer helped me find what I needed. https://stackoverflow.com/questions/12031328/css-zigzag-border-with-a-textured-background This was also helpful https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container – Hunter Nelson Jun 07 '21 at 21:03

0 Answers0