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>