您的位置：首页 > Web前端 > CSS

css自适应宽高等腰梯形

2016-12-21 16:56 141 查看
t1是梯形，

ct是梯形里面的内容。



梯形的高度会随着内容的高度撑高。宽度随着浏览器窗口变宽。

梯形上窄下宽或上宽下窄可以通过 transform 的大小来修改。

<div class="ti">
<div class="ct">
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</div>
<style>
.ti {
position: relative;
width: 40%;
height: auto;
margin: 50px auto;
}

.ti:before,.ti:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
background-color: blue;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}

.ti:before {
left: 0;
transform: skew(-45deg);
-webkit-transform: skew(45deg);
}

.ti:after {
right: 0;
transform: skew(45deg);
-webkit-transform: skew(-45deg);
}
.ct{
position: relative;
text-align: center;
z-index: 10;
color: #fff;
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航