等腰梯形

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;