Responsive triangles on both sides of the element - html

Question

I have a project where there will be two triangles, one of each side, as the images below shows, I am having difficulty in, first of all, getting each one on correct side, I have been trying using floats but it is not working.
And then making them align with the white zone irrespective of screen size i.e. responsive.
#anim {
position: relative;
height: 100%;
min-height: 100%;
background-image: url("http://i.imgur.com/rxks29H.jpg");
background-image: no-repeat;
background-size: 100%;
}
#anim img {
position: relative;
height: 100%;
width: 100%;
}
.arrow-left {
position: absolute;
width: 0;
height: 0;
width: 200px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
z-index: 3;
top: 30%;
border-left: 200px solid green;
}
.arrow-right {
position: absolute;
width: 200px;
float: right;
z-index: 3;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
top: 30%;
border-right: 200px solid blue;
}
<section id="anim">
<img src="http://i.imgur.com/ucQ3ZXl.png">
<div class="arrow-right">
</div>
<div class="arrow-left">
</div>
</section>

Answer 1

Why not make the arrows part of the background image to insure that it's always in place no matter the screen size, and then the content in each arrow can be positioned on top an if it moves a little it wont break the background itself. I created the background really fast to illustrate what I mean, feel free to re-create the image yourself if needed.
to position the text in each arrow change the CSS to this:
float: left or float: right don't work with position: absolute you need to use the left and right properties.
#anim {
position: relative;
height: 100%;
min-height: 100%;
background-image: url("http://i.imgur.com/rxks29H.jpg");
background-image: no-repeat;
background-size: 100%;
}
#anim img {
position: relative;
height: 100%;
width: 100%;
}
.arrow-left {
padding: 2.5% 15px;
text-transform: uppercase;
position: absolute;
width: 13%;
left: 0;
z-index: 3;
top: 36%;
}
.arrow-right {
padding: 2.5% 15px;
text-transform: uppercase;
position: absolute;
width: 13%;
right: 0;
z-index: 3;
top: 36%;
}
.arrow-right h2 {
font-size: 28px;
color: #FFF;
}
.arrow-left h2 {
font-size: 28px;
color: #FFF;
}
<section id="anim">
<img src="http://i.stack.imgur.com/Fbhc4.png">
<div class="arrow-right">
<h2>Scouting For Companies</h2>
</div>
<div class="arrow-left">
<h2>Seeking For Ideas</h2>
</div>
</section>
You will need to add some rules for smaller screens and really large ones if you are making the site responsive.
** Edit **
I added the animation really quick just to illustrate what you need to do and give you a good head start on it.
Here is a JSFIDDLE.