svg triangle with 100% width - html

Question

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.
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.
It would be great if I could place this swg as a background of a div. (using css)
Here is my svg Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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">
<polygon points="1280,70 0,70 0,0 "/>
</svg>
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.
Here you can see an example:
jsfiddle.net/maszzfom

Answer 1

Remove width and height
<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"
viewBox="0 0 1280 70" enable-background="new 0 0 1280 70" xml:space="preserve" preserveAspectRatio="none">
<polygon points="1280,70 0,70 0,0 "/>
</svg>
css
svg{width:100%}
resource on responsive svg
Demo
upate: save the svg as file and use it like this
.element {
background-image: url(image.svg);
/* other styles */
}
If you want a pure css solute the give pseudo element or linear-gradient a try

Answer 2

If the triangle doesn't have content by itself (just decoration), it should be defined in the CSS.
Following your example with a triangle ( 100% width and static height 70px), you could achieve it as:
.triangle {
position: relative;
}
.triangle:before {
background-repeat: no-repeat;
background-size: 100% 100%;
content: '';
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: -70px;
height: 70px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,100 0,100' style='fill:%23000000;' /%3E%3C/svg%3E");
}
<div class="triangle"></div>
The triangle coordinates are possible to invert: points='0,0 0,100 100,100'
You could change the triangle color: "fill:%23000000;"
The CSS works with :before and :after, depending your needs!
Fiddle: http://jsfiddle.net/b8czxyzg/