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>