div 实现 梯形

梯形的实现：

 - <div class="front_div">
        <div class="transform_div"></div>
        <div class="box">
                内容  部分              
        </div>
   </div> ```
对应css
.transform_div{position: absolute; width: 100%; height: 100%; transform: perspective(244px) rotateX(-5deg);background: -webkit-gradient(linear,0 0,0 bottom, from(rgba(255,140,17,0.7)),to(#ff8c11)); border-radius: 6px;}


或者： 

<div class="front_div"></div>
.front_div{
            position: relative;
            display: inline-block;
            padding: .5em 1em .35em;
            color: white;
        }
.front_div::before {
            content: '';
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            background: #58a;
            transform: perspective(.5em) rotateX(-5deg);
            background: -webkit-gradient(linear,0 0,0 bottom, from(#7abeec),to(#56abe4));;
        }

注释： front_div 是最外层div transform_div是变形的div 即梯形div box 为内容div .
因为如果把内容放到transform里面 内容也会变形 所以用定位使两个div重合 既能显示梯形 又能像是内容 主要用了透视属性： perspective 和旋转： rotatex()