css实现div梯形

实现梯形，备忘

css：

 div {
        position: relative;
        display: inline-block;
        padding: 0.5em 0.5em 0.35em;
        color: white;
        transform: rotateZ(330deg);
      }
      div::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #58a;
        transform: perspective(0.5em) rotateX(-5deg);
        background: -webkit-gradient(
          linear,
          0 0,
          0 bottom,
          from(#7abeec),
          to(#56abe4)
        );
      }

html：

<div></div>