正文
css自适应宽高等腰梯形
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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>
