Html transform property - html

Question

How to set text and background on this div straight? The transform property is making it curved.
#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

Use a pseudo for the image and then reverse the skew on it and the p with transform: skew(30deg);
#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>

Answer 2

An alternative idea is to use clip-path to mask out the parallelogram shape rather than transform:skew. One current caveat is limited browser compatibility.
My example is based on Harry's answer to "Shape with a slanted side (responsive)":
#parallelogram {
position: relative;
width: 240px;
height: 80px;
line-height: 80px;
text-align: center;
color: red;
background-color: grey;
background-image: url(http://lorempixel.com/g/240/80/);
-webkit-clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}
<div id="parallelogram">136,380 Kn</div>