1.css画

说明：css画出倒梯形

.outer-box{
  width: 50px;
  height: 50px;
  position: relative;
  //overflow: hidden;
}
/*使用transform属性后，梯形样式会溢出父容器*/
.gradient_bg {
  position: absolute;
  //left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #010101 13.46%, #1B3D55 59.95%);
  transform: perspective(0.1em) rotateX(179deg);
  border-radius: 5px;
}

 2.canvas

说明：画出正梯形

如何想让它倒过来;直接沿着X旋转180度。

transform: rotateX(180deg)