Html转换属性
Html转换属性
提问于 2016-09-28 17:28:49
如何将文本和背景设置在这个div上？变换属性使其弯曲。
#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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-28 20:30:20
另一种方法是使用clip-path来掩盖平行四边形的形状，而不是transform:skew。当前的一个警告是有限的浏览器兼容性。
我的例子是基于哈利的 答：“侧倾斜形状(响应)”的
#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>
Stack Overflow用户
发布于 2016-09-28 19:04:13
对图像使用伪，然后用transform: skew(30deg);反转其上的倾斜和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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39754069
复制相关文章
相似问题
腾讯云开发者
