title: svg triangle with 100% width
body: <p>I want to use an svg image in 100% width which has as filled background from the top left to the bottom right. I've tried several ways to make it always 100% wide (background-size, etc.) but it doesn't work.</p>
  
  <p>If I'm opening the svg source code, there are several "fix" widths. Maybe this is the problem. But I don't know how I could fix it.</p>
  
  <p>It would be great if I could place this swg as a background of a div. (using css)</p>
  
  <p>Here is my svg Code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="1280px" height="70px" viewBox="0 0 1280 70" enable-background="new 0 0 1280 70" xml:space="preserve"&gt;
  &lt;polygon points="1280,70 0,70 0,0 "/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Does anybody have an idea how to fix this? I also thought about another way, with an rotated div container. But I think svg is the best way.</p>
  
  <p>Here you can see an example:</p>
  
  <p><a href="http://jsfiddle.net/maszzfom" rel="nofollow">jsfiddle.net/maszzfom</a></p>