Html transformieren Eigenschaft

Question

Wie man Text und Hintergrund auf diesem Div. Gerade einstellen? Die transform -Eigenschaft macht es gekrümmt.

#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

Eine alternative Idee ist, zu verwenden, clip-path um den Par zu maskieren Allelogrammform statt transform:skew. Ein aktueller Vorbehalt ist begrenzt browser compatibility.

Mein Beispiel basiert auf Harry'sanswer 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>

Answer 2

Verwenden einer Pseudo für das Bild, und dann kehren die Skew auf sie und die p mit 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>