问题描述:

I've created a polygon/triangle using an SVG, however I'm not sure how to do the following:

1) Have a 9 degree angle/slant

2) Keep aspect ratio when the browser resizes. (width 100%)

Here's the SVG code:

`<svg preserveAspectRatio="none" viewBox="0 0 25 10">`

<polygon points="0,10 40,0 25, 10 0" />

</svg>

And here is the Codepen:

http://codepen.io/anon/pen/VeNyQN

Thanks!

Your question is not entirely clear, but I am guessing you just want to insert a triangle on your page that has a 9 degree slope of the top side? Then have it keep its 9 degree slope as the page width increases? Is that right?

If so, you don't want to be using `preserveAspectRatio="none"`

. That breaks the aspect ratio and causes the SVG to stretch.

First we need to work out what a 9deg slope corresponds to.

```
tan(9) = Opposite-side / Adjacent-side
_____-----+
_____----- | opposite
._9deg__________________|
adjacent
tan(9) ~= 0.1584
```

So that means for a triangle 100 wide, the height of the opposite side is 15.84.

So our SVG will need to look like the following:

```
<svg width="100%" viewBox="0 0 100 15.84">
<polygon points="0,15.84 100,15.84 100 0" />
</svg>
```