shaping a tricky shape on a div - html

Question

I'm trying to achieve this shape in css, tried in several different ways, checked online for examples but looks like this shape is kind of tricky to accomplish.
Anyone that could have an idea of how to do this? Not sure if it's even possible with css only technique.
Thank you!

Answer 1

Yes, it is possible and it's very simple.
demo
Result:
:
I'm using just one element and a pseudo for the bottom left corner so the HTML is simply:
<div class='shape'></div>
Relevant CSS:
.shape {
overflow: hidden; /* to hide the top right corner
of the parallelogram formed by the pseudo */
position: relative;
width: 20em; height: 10em; /* any values really */
}
.shape:before {
position: absolute;
bottom: 0; left: 0;
width: 150%; height: 150%;
transform-origin: 0 100%;
transform: rotate(-3deg) skewX(-10deg);
background: black;
content: '';
}
You can get a lot of shapes using CSS transforms. And they are real shapes, you can have any kind of background behind.

Answer 2

I think it is perfect solution to your question...
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 5px solid transparent;
padding: 10 8px 5 5;
}

Answer 3

You could also use :before, :after pseudo and transform property. Here's an example.
#box {
width: 400px;
height: 200px;
background-color: #212121;
position: relative;
}
#box:after, #box:before {
display: block;
content: "\0020";
color: transparent;
width: 411px;
height: 45px;
background: white;
position: absolute;
bottom: -20px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
#box:before {
bottom: 80px;
left: -200px;
-moz-transform: rotate(92deg);
-webkit-transform: rotate(92deg);
-o-transform: rotate(92deg);
-ms-transform: rotate(92deg);
transform: rotate(92deg);
}
You may have to change some values to get the shape you want.