How can I skew the middle part of my div box - html

Question

I am using skew in order to achieve the same design as the one in the photo but I could only get it right for the top part.
How can I do something like this:
you can also see on my codepen here
section#products {
background-image: url("https://www.oceana-residence.com/wp-content/uploads/2016/09/3-min-2.jpg");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
color: white;
position: relative;
h3 {
font-family: 'Titillium Web';
line-height: 1.2;
font-weight: bold;
font-size: 28px;
text-transform: uppercase;
}
div.products_box {
overflow: auto;
width: 100%;
&>div {
opacity: 0.8;
max-width: 50%;
width: 100%;
height: 450px;
display: flex;
}
.box {
width: 100%;
display: flex;
align-items: center;
.flex {
max-width: 420px;
}
}
.products_left {
background: #2b2b2b;
float: left;
text-align: right;
.fa {
font-size: 100px;
}
.box {
justify-content: flex-end;
padding-right: 50px;
}
.content {}
.left_box {
padding-left: 40px;
}
}
.products_right {
float: right;
background: #d27473;
.box {
justify-content: inital;
padding-left: 50px;
}
.flex {
padding-right: 40px;
}
.fa {
font-size: 170px;
}
}
}
}
.anchor_top {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid white;
position: absolute;
left: 49.2%;
top: 0px;
z-index: 1;
}
.anchor_bottom_left {
width: 0;
height: 0;
border-left: 15px solid transparent;
/*border-right: 15px solid transparent;*/
border-top: 10px solid grey;
position: absolute;
left: 49.2%;
bootom: 0px;
z-index: 1;
}
.anchor_bottom_right {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid green;
position: absolute;
left: 49.2%;
bootom: 0px;
z-index: 1;
}
<section id="products">
<div class="anchor_top"></div>
<div class="products_box">
<div class="products_left">
<div class="box">
<div class="content flex">
</div>
<div class="left_box">
<div class="flex">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="products_right">
<div class="box">
<div class="flex">
<i class="fa fa-mobile" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="anchor_bottom_left"></div>
<div class="anchor_bottom_right"></div>
</section>

Answer 1

You can achieve this using :before and :after pseudo-elements.
You can have a container element <div class="image-container image-container-col-2"> and multiple children <div class="image-container-split">.
.image-container-col-2 was added in order to mark that the container will be split in two. Therefore this solution can be adapted to more columns. Or even more, use existing CSS libraries like Bootstrap own column system and adapt that.
The following code is long and, if you are using SCSS for example, you can easily parameterize this in order to be more readable.
SOLUTION 1: content on multiple columns but not on main container
p {
font-size: 1.1em;
font-family: Arial;
color: #fff;
}
.image-container {
position: relative;
width: 500px;
height: 331px;
}
.image-container.image-container-col-2 .image-container-split {
width: 50%;
}
.image-container:before {
content: '';
position: absolute;
z-index: -2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-repeat: none;
background-size: cover;
}
.image-container-split {
position: relative;
height: 100%;
float: left;
box-sizing: border-box;
border: 20px solid transparent;
border-bottom-color: #fff;
text-align: center;
/* Flexbox - use this to align items inside your container */
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap column;
}
.image-container-split:first-child {
border-left: none;
}
.image-container-split:last-child {
border-right: none;
}
.image-container-split:nth-child(odd) {
padding-left: 20px;
}
.image-container-split:nth-child(even) {
padding-right: 20px;
}
.image-container-split:after {
content: '';
position: absolute;
top: -20px;
border: 10px solid #fff;
border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):after {
right: -20px;
border-left-color: transparent;
}
.image-container-split:nth-child(even):after {
left: -20px;
border-right-color: transparent;
}
.image-container-split:before {
content: '';
position: absolute;
z-index: -1;
top: -20px;
right: 0;
left: 0;
bottom: -20px;
border: 20px solid transparent;
border-bottom-color: #fff;
opacity: 0.5;
}
.image-container-split:first-child:before {
border-left: none;
}
.image-container-split:last-child:before {
border-right: none;
}
.image-container-split:nth-child(odd):before {
background-color: red;
right: -20px;
}
.image-container-split:nth-child(even):before {
background-color: blue;
left: -20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="image-container image-container-col-2">
<div class="image-container-split">
<p>This is some content and some more and more and more and more </p>
<p>This is some content</p>
<p>This is some content</p>
</div>
<div class="image-container-split">
<p>This is some content and some more and more and more and more </p>
<p>This is some content</p>
<p>This is some content</p>
</div>
</div>
</body>
</html>
SOLUTION 2: content on multiple columns as well as on main container
Content is placed on main container and on separate two columns (notice the smileys).
p {
font-size: 1.1em;
font-family: Arial;
color: #fff;
}
.image-container-split p {
font-size: 3em;
}
.image-container {
position: relative;
width: 500px;
height: 331px;
padding: 40px 20px;
box-sizing: border-box;
text-align: center;
/* Flexbox - use this to align content */
display: flex;
flex-flow: wrap column;
align-items: center;
justify-content: center;
}
.image-container.image-container-col-2 .image-container-split:nth-child(odd) {
left: 0;
right: 50%;
}
.image-container.image-container-col-2 .image-container-split:nth-child(even) {
left: 50%;
right: 0;
}
.image-container:before {
content: '';
position: absolute;
z-index: -4;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-repeat: none;
background-size: cover;
}
.image-container-split {
position: absolute;
z-index: -3;
top: 0;
bottom: 0;
box-sizing: border-box;
border: 20px solid transparent;
border-bottom-color: #fff;
padding-bottom: 20px;
/* Flexbox - use this to align content */
display: flex;
flex-direction: wrap column;
align-items: center;
justify-content: center;
}
.image-container-split:first-child {
border-left: none;
padding-left: 20px;
}
.image-container-split:last-child {
border-right: none;
padding-right: 20px;
}
.image-container-split:before {
content: '';
position: absolute;
z-index: -1;
top: -20px;
border: 10px solid #fff;
border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):before {
right: -20px;
border-left-color: transparent;
}
.image-container-split:nth-child(even):before {
left: -20px;
border-right-color: transparent;
}
.image-container-split:after {
content: '';
position: absolute;
z-index: -3;
top: -20px;
left: 0;
right: 0;
bottom: -20px;
opacity: 0.5;
border: 20px solid transparent;
border-bottom-color: #fff;
}
.image-container-split:first-child:after {
border-left: none;
}
.image-container-split:last-child:after {
border-right: none;
}
.image-container-split:nth-child(odd):after {
background-color: red;
right: -20px;
}
.image-container-split:nth-child(even):after {
background-color: blue;
left: -20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="image-container image-container-col-2">
<p>This is some content and some more and more and more and more </p>
<p>This is some content</p>
<p>This is some content</p>
<div class="image-container-split-container">
<div class="image-container-split">
<p>☺</p>
</div>
<div class="image-container-split">
<p>☺</p>
</div>
</div>
</div>
</body>
</html>
Container with triangles only
If there needs to be container with some triangles then the following can be achieved:
The size of the image is 500 x 331.
:before - is creating the top triangle
:after + background image - is creating the bottom triangle
.image-container has a smaller height than the image in order to use that remaining part to be added to the bottom triangle
p {
font-size: 1.1em;
font-family: Arial;
color: #fff;
}
.image-container-split p {
font-size: 3em;
}
.image-container {
position: relative;
width: 500px;
height: 311px;
padding: 20px;
box-sizing: border-box;
text-align: center;
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-repeat: no-repeat;
background-size: 500px 331px;
/* Flexbox - use this to align content */
display: flex;
flex-flow: wrap column;
align-items: center;
justify-content: center;
}
.image-container:before {
content: '';
position: absolute;
top: 0;
border: 20px solid transparent;
border-top-color: #fff;
}
.image-container:after {
content: '';
left: 50%;
transform: translateX(-20px);
bottom: -40px;
position: absolute;
border: 20px solid #fff;
border-top: 20px solid transparent;
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: 500px 331px;
background-repeat: no-repeat;
background-position: center bottom;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="image-container">
<p>This is some content and some more and more and more and more </p>
<p>This is some content</p>
<p>This is some content</p>
</div>
</body>
</html>

Answer 2

Just few changes, complete your goal:
.anchor_top {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid white;
position: absolute;
left: 48.9%; //change here
top: 0px;
z-index: 1;
}
For bottom part :
.anchor_bottom_left {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-top: 10px solid grey;
position: absolute;
left: 48.9%; //change here
z-index: 1;
}
.anchor_bottom_right {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-top: 10px solid #d98d8e;
position: absolute;
left: 50%; //change here and remove border-left
z-index: 1;
}

Answer 3

One option would be to work with pseudo-classes + transform:skewX.
/* Using pseudo-classes + transform skewX */
.products_box:before,
.products_box:after {
content: '';
display: block;
width: 50%;
position: absolute;
bottom: 0;
height: 15px;
background: white;
transform: skewX(50deg);
z-index: 2;
}
.products_box:before {
left: -10px;
}
.products_box:after {
right: -10px;
transform: skewX(-50deg);
}
See full snippet below.
section#products {
background-image: url("https://www.oceana-residence.com/wp-content/uploads/2016/09/3-min-2.jpg");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
color: white;
position: relative;
}
section#products h3 {
font-family: 'Titillium Web';
line-height: 1.2;
font-weight: bold;
font-size: 28px;
text-transform: uppercase;
}
section#products div.products_box {
overflow: auto;
width: 100%;
}
section#products div.products_box > div {
opacity: 0.8;
max-width: 50%;
width: 100%;
height: 450px;
display: flex;
}
section#products div.products_box .box {
width: 100%;
display: flex;
align-items: center;
}
section#products div.products_box .box .flex {
max-width: 420px;
}
section#products div.products_box .products_left {
background: #2b2b2b;
float: left;
text-align: right;
}
section#products div.products_box .products_left .fa {
font-size: 100px;
}
section#products div.products_box .products_left .box {
justify-content: flex-end;
padding-right: 50px;
}
section#products div.products_box .products_left .left_box {
padding-left: 40px;
}
section#products div.products_box .products_right {
float: right;
background: #d27473;
}
section#products div.products_box .products_right .box {
justify-content: inital;
padding-left: 50px;
}
section#products div.products_box .products_right .flex {
padding-right: 40px;
}
section#products div.products_box .products_right .fa {
font-size: 170px;
}
.anchor_top {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid white;
position: absolute;
left: 49.2%;
top: 0px;
z-index: 1;
}
/*
.anchor_bottom_left{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid grey;
position: absolute;
left: 49.2%;
bootom: 0px;
z-index: 1;
}
.anchor_bottom_right{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid green;
position: absolute;
left: 49.2%;
bootom: 0px;
z-index: 1;
}
*/
/* Using pseudo-classes + transform skewX */
.products_box:before,
.products_box:after {
content: '';
display: block;
width: 50%;
position: absolute;
bottom: 0;
height: 15px;
background: white;
transform: skewX(50deg);
z-index: 2;
}
.products_box:before {
left: -10px;
}
.products_box:after {
right: -10px;
transform: skewX(-50deg);
}
<section id="products">
<div class="anchor_top"></div>
<div class="products_box">
<div class="products_left">
<div class="box">
<div class="content flex">
<section id="black-studio-tinymce-10" class="widget-1 widget-first widget-last widget-odd widget widget_black_studio_tinymce"><div class="textwidget"><h3>Importance of Business</h3>
<h3>Intelligence Technology</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue nisi eget justo rutrum, ut pellentesque nulla posuere. Etiam vitae fringilla massa. Aenean sit amet tellus ex.</p>
</div></section> </div>
<div class="left_box">
<div class="flex">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="products_right">
<!-- about_widget here -->
<div class="box">
<div class="flex">
<i class="fa fa-mobile" aria-hidden="true"></i>
</div>
<div class="content flex">
<section id="black-studio-tinymce-9" class="widget-1 widget-first widget-last widget-odd widget widget_black_studio_tinymce"><div class="textwidget"><h3>Improving Mobile</h3>
<h3>Banking Experience</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue nisi eget justo rutrum, ut pellentesque nulla posuere. Etiam vitae fringilla massa. Aenean sit amet tellus ex.</p>
</div></section> </div>
</div>
</div>
</div>
<div class="anchor_bottom_left"></div>
<div class="anchor_bottom_right"></div>
</section>