HTML 转换属性

Question

如何直接在这个div上设置文字和背景？ transform 属性使其 flex 。

#paralelogram {
  margin-left: 190px;
  width: 200px;
  height: 80px;
  transform: skew(-30deg);
  background-image: url('http://lorempixel.com/200/80/animals/8/');
  position: relative;
  overflow: hidden;
}
#cena {
  font-size: 20px;
  font-family: monospace;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  margin-left: 35px;
  margin-top: 25px;
}

<div class="col-xs-12 volks">
  <div id="paralelogram">
    <p id="cena">136,380 Kn</p>
  </div>
</div>

Answer 1

对图像使用伪，然后使用 transform: skew(30deg);

反转图像和 p 的倾斜

#paralelogram {
  margin-left: 190px;
  width: 200px;
  height: 80px;
  transform: skew(-30deg);
  position: relative;
  overflow: hidden;
  background: gray;
}
#paralelogram:before {
  content: '';
  width: 240px;
  height: 100%;
  top: 0;
  left: -20px;
  transform: skew(30deg);
  background-image: url('http://lorempixel.com/240/80/animals/8/');
  background-repeat: no-repeat;
  position: absolute;
}
#cena {
  font-size: 20px;
  font-family: monospace;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  margin-left: 35px;
  margin-top: 25px;
  transform: skew(30deg);
}

<div class="col-xs-12 volks">
  <div id="paralelogram">
    <p id="cena">136,380 Kn</p>
  </div>
</div>