Need help creating slated or angled divs CSS/HTML - html

Question

I need help creating responsive divs with background images that have a slant or angle in them with no border to achvive a look like this:
http://jsfiddle.net/b4zjs60k/
<div class="rr-left">
</div>
<div class="rr-right">
</div>
I have tried using background images with this solution, the only problem is the angled borders are color and if I add a background image to that it looks all messed up.
I've seen this one: http://codepen.io/jefflupinski/pen/azvsA but the only problem with the skew is that I need to have the left and right sides to be straight
So i was wondering if anyone has found a solution to make both divs touch and have responsive backgrounds or combine both in a way to incorporate images
thanks hopefully this makes sense

Answer 1

Try the method below and adjust as needed.
#holder {
height: auto;
width: auto;
float: left;
overflow: hidden;
font-family: calibri;
background-color: white;
position: relative;
}
#holder .content {
display: inline-block;
width: 45%;
text-align: center;
position: relative;
color: white;
cursor: pointer;
background: #2c3e50;
margin-left: 0;
z-index: 2;
}
#holder .content:hover {
background-color: #425160;
}
.content:hover .line {
background: #425160!important;
}
#holder .line {
-ms-transform: rotate(10deg);
/* IE 9 */
-webkit-transform: rotate(10deg);
/* Chrome, Safari, Opera */
transform: rotate(10deg);
border-left: solid 1px white;
position: absolute;
right: 89%;
display: block;
width: 40px;
background: inherit;
height: 250px;
bottom: -10px;
z-index: -1;
}
p,
h3 {
padding: 0 30px 0 30px;
text-align: left;
width: 70%;
}
h3 {
font-size: 24px;
line-height: 24px;
margin-bottom: 0;
}
<div id="holder">
<div class="content">
<h3>This is a header</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
<div class="content">
<div class="line"></div>
<h3>This is a header</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Holder -->

Answer 2

Here is my answer, using skew, but in a container that has overflow hidden
.header {
width: 100%;
height: 0%;
padding-bottom: 25%;
position: relative;
overflow: hidden;
}
.left {
width: 60%;
height: 100%;
position: absolute;
right: 50%;
top: 0px;
transform: skew(-20deg);
overflow: hidden;}
.right {
width: 60%;
height: 100%;
position: absolute;
left: 50%;
top: 0px;
transform: skew(-20deg);
overflow: hidden;
}
.innerleft {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://placekitten.com/800/400);
transform: skew(20deg);
left: 10%;
background-size: cover;
}
.leftcontent {
position: absolute;
left: 100px;
top: 60px;
color: white;
font-size: 40px;
}
.right:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://placekitten.com/600/500);
transform: skew(20deg);
right: 10%;
background-size: cover;
}
<div class="header">
<div class="left">
<div class="innerleft">
<div class="leftcontent">LEFT</div>
</div>
</div>
<div class="right"></div>
</div>