Html transform属性

Question

如何在这个div上直接设置文本和背景？ transform属性使它弯曲。

#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

一种替代的想法是使用clip-path掩盖了标准杆allelogram形状而不是transform:skew。目前的一个警告是有限的browser compatibility。

我的例子是基于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

使用该图像的伪然后反转在其上的扭斜和p与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>