如何直接在这个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>
最佳答案
对图像使用伪,然后使用 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>
关于HTML 转换属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39754069/