Div with two edges differently slanted - html

Question

Here's what I want to achieve:
slanted div:
HTML:
<span class="container">
<span class="element">some dummy text</span>
</span>
CSS:
.container .element {
font-size: 24px;
background-color: gray;
padding: 5px;
position: relative;
}
.container .element:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
}
.container .element:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(0deg, -1deg);
-webkit-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
}
https://jsfiddle.net/mktcany9/
I can't really make it like on the image, even though there is a lot of topics about similar divs.

Answer 1

This might help you.
The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowing parts are hidden with overflow:hidden;.
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
body {
background: #fff;
}
<div>slanted div text</div>
<div>
slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>