how to make shape with diagonal div? - html

Question

I want to make this shape :
there supposed to be 3 div shapes like this. I built already some shape, but I want to see how this shape will fit in my website
I already built this :
codepan
css example for what i did :
.mainOuterDiv{
height:300px;
overflow:hidden;
background:#FFF;
}
.middDiv{
width:70%;
height:75px;
background-color: #0CF;
margin:0px auto;
position:relative;
margin-top:50%;
}
.innerLeft{
position: absolute;
left: -60px;
top: -20px;
width: 60px;
height: 100%;
z-index: 1;
transform: skew(180deg,215deg);
background-color: #0CF;
}
.innerRight{
position: absolute;
right: -60px;
top: -20px;
width: 60px;
height: 100%;
z-index: 1;
transform: skew(180deg,145deg);
background-color: #0CF;
}
.textDiv{
z-index:9999;
width:100%;
height:100%;
position:absolute;
background-color: #0CF;
}
is there a way to make this in css ?

Answer 1

Here is the responsive version with skewY i have used :pseudo elements
* {
box-sizing: border-box;
}
.container {
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
position: relative;
}
.content {
background: white;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 15px;
}
.shadow {
width: 70%;
position: absolute;
left: 50%;
height: 18%;
bottom: 18%;
background: #7092BE;
border: 1px solid black;
transform: translateX(-50%);
z-index: -1;
}
.shadow:before,
.shadow:after {
content: '';
position: absolute;
width: 30%;
background: #7092BE;
height: 100%;
bottom: -28%;
border: 1px solid black;
}
.shadow:before {
left: -30%;
transform: skewY(-23deg);
}
.shadow:after {
right: -30%;
transform: skewY(23deg);
}
.ribbon {
width: 70%;
position: absolute;
left: 50%;
height: 18%;
bottom: -1px;
background: #7092BE;
border: 1px solid black;
transform: translateX(-50%);
z-index: 1;
}
.ribbon:before,
.ribbon:after {
content: '';
position: absolute;
width: 30%;
background: #7092BE;
height: 100%;
top: -28%;
border: 1px solid black;
}
.ribbon:before {
left: -30%;
transform: skewY(23deg);
}
.ribbon:after {
right: -30%;
transform: skewY(-23deg);
}
hr {
margin: 20px;
0
}
<div class="container">
<div class="content">
Nullam dictum felis eu pede
</div>
<div class="shadow"></div>
<div class="ribbon"></div>
</div>
<hr>
<div class="container" style="width:200px; height:200px;">
<div class="content">
Nullam dictum felis eu pede
</div>
<div class="shadow"></div>
<div class="ribbon"></div>
</div>

Answer 2

There is some example :
.container
{
position:relative;
width:400px; height:302px;
overflow:hidden;
}
.mainDiv
{
height:300px; width:300px;
background-color:white;
border:solid 1px black;
position:absolute;
left:0;right:0;margin:auto;
}
.middDiv
{
height:55px; width:70%;
background-color:lightblue;
position:absolute;
bottom:0;left:0;right:0;
margin:auto;
z-index:10;
}
.leftDiv, .rightDiv
{
position:absolute;
bottom:26px;
width:30%;height:48px;
background-color:blue;
z-index:10;
}
.leftDiv
{
left:-13%;
transform:rotate(30deg) skew(30deg);
}
.rightDiv
{
right:-13%;
transform:rotate(-30deg) skew(-30deg);
}
.leftBDiv, .rightBDiv
{
position:absolute;
width:13%; height:47px;
bottom:59px;
background-color:black;
z-index:9;
}
.leftBDiv
{
left:-12%;
transform:rotate(-30deg) skew(-30deg);
}
.rightBDiv
{
right:-12%;
transform:rotate(30deg) skew(30deg);
}
<div class="container">
<div class="mainDiv">
<div class="middDiv"></div>
<div class="leftDiv"></div>
<div class="rightDiv"></div>
<div class="leftBDiv"></div>
<div class="rightBDiv"></div>
</div>
</div>
I use different colors for middle, left and right blocks so You can see it.
If You will use border for those divs, You have to change positions: left, right and bottom for all of them.
There is fiddle example, too.