create a responsive triangle - html

Question

I'm trying to set two triangles in the following way:
The two triangles have to go from the middle to the outside of the browser. I tried to set it up with a wrapper and a background-color and then rotate the wrapper, but I cant get it responsive. The code I tried was:
#page-header-wrapper-triangle {
background-color:#e14b41 ;
-webkit-transform: rotate(-12deg) translate3d(0, 0, 0);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
transform: rotate(-12deg);
margin: 0 -21px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
position: relative;
min-height: 204px;
z-index:1000;
width:80%;
}
#page-header-wrapper-triangle-2 {
background-color:#e14b41 ;
-webkit-transform: rotate(12deg) translate3d(0, 0, 0);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
transform: rotate(12deg);
margin: 0 -54px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
position: relative;
min-height: 204px;
z-index:1000;
width:80%;
float:right;
top:-520px;
}
<div id="page-header-wrapper-triangle">
<div class="container">
<div class="row">
<div class="right-red col-xs-12 col-sm-6">
</div>
<div class="left-blue col-xs-12 col-sm-6">
</div>
</div>
</div>
</div>
<div id="page-header-wrapper-triangle-2">
<div class="container">
<div class="row">
<div class="right-red col-xs-12 col-sm-6">
</div>
<div class="left-blue col-xs-12 col-sm-6">
</div>
</div>
</div>
</div>
This works when the width of the browser is 1920 px, but s soon as I change the width it doesn't work. I got no clue how I can get this responsive.
I also tried it with background pictures. But this also doesn't work.

Answer 1

You can do it with pseudo selectors :after. It's responsive-ready only for some small and mid widths. But you can easily customize with media queries and change the top and height value.
There is a live example using SCSS
.header {
background-color: grey;
padding-bottom: 60px;
padding-top: 60px;
position: relative;
display: inline-block;
width: 100%;
}
.header .block-left {
float: left;
width: 50%;
}
.header .block-left:after {
background-color: red;
content: ' ';
left: 0;
top: -125px;
height: 200px;
position: absolute;
transform: skew(0deg, -15deg);
width: 50%;
z-index: 20;
}
.header .block-right {
float: right;
width: 50%;
}
.header .block-right:after {
right: 0;
background-color: yellow;
content: ' ';
top: -125px;
height: 200px;
position: absolute;
transform: skew(0deg, 15deg);
width: 50%;
z-index: 20;
}
<div class="header">
<div class="block-left"></div>
<div class="block-right"></div>
</div>

Answer 2

Here's a explanation of how css triangles works : http://codepen.io/chriscoyier/pen/lotjh
#import url(http://fonts.googleapis.com/css?family=Andika);
$stepTiming: 0.8s 0.2s;
.triangle-demo {
width: 100px;
height: 100px;
margin: 0 auto;
background: tan;
border-top: 0 solid #EE7C31;
border-left: 0 solid #F5D97B;
border-bottom: 0 solid #D94948;
border-right: 0 solid #8DB434;
transition: $stepTiming;
.step-1 & {
border-top-width: 10px;
}
.step-2 & {
border-left-width: 10px;
}
.step-3 & {
border-right-width: 10px;
}
.step-4 & {
border-bottom-width: 10px;
}
.step-6 & {
background: transparent;
}
.step-7 & {
width: 0; height: 0;
}
.step-8 & {
border-left-color: transparent;
}
.step-9 & {
border-right-color: transparent;
}
.step-10 & {
border-top-color: transparent;
}
}
.triangle-title {
width: 300px;
padding: 1rem;
color: white;
background: #D94948;
border-radius: 20px;
margin: auto;
opacity: 0;
transition: $stepTiming;
.step-11 & {
opacity: 1;
}
}
body {
background: #333;
font-family: 'Andika', sans-serif;
color: white;
text-align: center;
font-size: large;
transform: translateZ(0);
}
.steps {
position: relative;
height: 45px;
> div {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
background: #333;
transition: 0.3s;
}
.step-0 {
opacity: 1;
}
.step-1 & .step-1 {
opacity: 1;
}
.step-2 & .step-2 {
opacity: 1;
}
.step-5 & .step-5 {
opacity: 1;
}
.step-6 & .step-6 {
opacity: 1;
}
.step-7 & .step-7 {
opacity: 1;
}
.step-8 & .step-8 {
opacity: 1;
}
.step-11 & .step-11 {
opacity: 1;
}
}
h1 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1.5rem;
border-bottom: 1px solid #555;
color: #999;
}
FYI http://1stwebdesigner.com/css-shapes/