title: Tricky Triangle Design implementation
body: <p>I am working on a website at the moment and have run into a problem with a triangle pattern.</p>
  
  <p>The designer mocked the site up with triangular tiles and patterns :</p>
  
  <p><a href="https://i.stack.imgur.com/5XM6S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5XM6S.png" alt="triangle pattern"></a></p>
  
  <p>Please note that I had to remove most of the content to post it here, but there is content on top of the triangular pattern. </p>
  
  <p>I have done some research on how to implement the triangles in HTML,CSS and possibly JS(?) and came up with three possible options: </p>
  
  <ul>
  <li>background-image</li>
  <li>clipping divs and positioning them</li>
  <li>using svg and positioning this</li>
  </ul>
  
  <p>The problem with a background-image is that some of these tiles will later change on click and show things etc. So they really shouldn't be on a picture</p>
  
  <p>I have started clipping and positioning divs, but this is just taking forever and I am starting to feel like this cannot be the best solution. Loads of fiddling and I think I will later have problems with inconsistencies</p>
  
  <p>I don't have much experience working with svg, but I would have to draw them all one by one and position them as well (right? this is an assumption). Doesn't seem like the best practice approach.</p>
  
  <p>Does anyone have any input on how I could solve this or do I just have to follow through with one of the solutions named above, as there is no quicker way.</p>
  
  <p>I would really appreciate any ideas.
  Thanks Anton</p>