Htmlトランスフォームのプロパティ

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

とp逆clip-pathは、アレログラムの形はtransform:skewではなく。現行の警告の1つは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

使用イメージの擬似し、それにスキューおよび代替アイデアが使用する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>