5 矩形

I transform角度生成

.box{
          width: 100px;
          height: 100px;
          border: 1px solid orangered;
          transform: perspective(1em) rotateX(5deg);
          margin: 100px;
      }

II 伪元素生成

.box{

           position: relative;
           display: inline-block;
           padding: .5em 1em .35em;
           margin: 200px;

        }
       .box::after{
           width: 150px;
           height: 150px;
           content: "";
           position: absolute;
           top: -20px;right: 0;left: -10px;right: 0;
           z-index: -1;
           background:orangered;
           transform: perspective(1em) rotateX(5deg);
       }

为了让它的尺寸更好掌握，我们可以为它指定 transform-origin: bottom;，当它在 3D 空间中旋转时，可以把它的底边固定住。

transform: scaleY(1.3) perspective(.5em) rotateX(5deg); 
transform-origin: bottom;