Slants cross over responsive - html

Question

Is there anyway to create similar to the attached with HTML/CSS, that works responsive? without using am image?
Unable to get the oragne border & content added in
CSS
.left {
border-bottom: 70px solid #3488b1;
border-right: 1000px solid transparent;
height: 0;
position: absolute;
bottom:0;
width: 1px;
opacity:.5;
}
.right {
border-bottom: 70px solid #3488b1;
border-left: 1000px solid transparent;
height: 0;
width: 1px;
position: absolute;
bottom:0;
}
.footer {height:100px;}
& HTML
<div class="footer">
<span class="left"> </span>
<span class="right"></span>
</div>

Answer 1

One way is to use transforms.
html, body {
height:100%;
width:100%;
}
#responsive {
position:relative;
height:25%;
width:80%;
overflow:hidden;
min-height: 80px;
}
#triOne {
position:absolute;
background-color:aqua;
height:300%;
width:300%;
transform: rotate(10deg);
top:55%;
left:-100%;
}
#triTwo {
position:absolute;
background-color:blue;
height:300%;
width:300%;
border: 5px solid orange;
transform: rotate(-10deg);
top:45%;
right:-100%;
}
#content {
position:absolute;
right:10px;
bottom:10px;
color:white;
}
<div id="responsive">
<div id="triOne"></div>
<div id="triTwo"></div>
<div id="content">content</div>
</div>
It's not really responsive, but I think with a few tweaks you should be able to get it the way you want it.