Css 3 custom trapezoid - html

Question

Hi ,
I need create div which would look like one on the provided image. Notice black and grey zones. I have been experimenting with css 3 but i was able to create only differently rotated trapezoid. Is it possible to create this only with css ?
EDIT: What ive tried was this
trapezoid {
border-bottom: 100px solid red;
border-left: 150px solid transparent;
border-right: 0px solid transparent;
height: 0;
}
It produces trapezoid which is nice but its differnetly rotated and i cant figure out how to rotate it

Answer 1

You could use a skew'ed pseudo element for this. Something like:
div {
height: 100px;
background: tomato;
padding-top: 10px;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150%;
background: gray;
-webkit-transform-origin: top left;
-webkit-transform: skewY(2deg);
-moz-transform-origin: top left;
-moz-transform: skewY(2deg);
transform-origin: top left;
transform: skewY(2deg);
}
<div></div>
Another Approach would be:
div{
height:100px;
width:90vw;
margin:0;padding:0;
padding-top:10px;
background:gray;position:relative;
}
div:before{
content:"";
position:absolute;
top:0;
left:0;
border-left:90vw solid transparent;
border-top:10px solid red;
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
<div></div>

Answer 2

You have to take a dummy div to make it behave as want that to rotate and make the tail visible
#black {
background-color: black;
position: absolute;
-ms-transform: rotate(1deg);
/* IE 9 */
-webkit-transform: rotate(1deg);
/* Safari */
transform: rotate(1deg);
top: -95px;
}
#grey {
background-color: grey;
position: absolute;
top: 0px;
}
div {
width: 100%;
height: 100px
}
<div id="grey"></div>
<div id="black"></div>

Answer 3

This is what your expected output:
.main {
background: none repeat scroll 0 0 grey;
height: 80px;
overflow: hidden;
position: relative;
width: 380px;
}
.inner {
background: none repeat scroll 0 0 red;
height: 80px;
left: 400px;
margin: 0 auto;
top: 80px;
width: 150px;
z-index: 99999;
}
.inner::before {
border-bottom: 0 solid transparent;
border-right: 100px solid red;
border-top: 83px solid transparent;
bottom: 0;
content: "";
height: 66px;
left: 15px;
position: absolute;
right: 100%;
top: 0;
width: 0;
}
<div class="main">
<div class="inner"></div></div>
Hope it helps.