Див с двумя ребрами по-разному наклонен

Question

Вот чего я хочу достичь:

наклонный 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/

Я не могу сделать это так, как на изображении, даже несмотря на то, что есть много тем о подобных div.

Answer 1

Это может помочь вам.

Свойство источника преобразования позволяет смещать псевдоэлемент из правого нижнего угла, а переполняющиеся части скрываются с помощью 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>