前端通过不同方式画等腰梯形

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

说明：画出正梯形

export default {  name: "index",  mounted() {    this.ininShape()  },  methods:{    ininShape(){      // 获取画布元素      const canvas = document.querySelector('#trapezoidCanvas');      const ctx = canvas.getContext('2d');      // 设置梯形的参数      const topWidth = 30;      const bottomWidth = 100;      const height = 50;      const trapezoidColor = '#008000'; // 绿色      // 计算梯形的顶点坐标      const xTopLeft = (canvas.width - topWidth) / 2;      const xTopRight = xTopLeft + topWidth;      const xBottomLeft = (canvas.width - bottomWidth) / 2;      const xBottomRight = xBottomLeft + bottomWidth;      const yTop = (canvas.height - height) / 2;      const yBottom = yTop + height;      // 绘制梯形      ctx.fillStyle = trapezoidColor;      ctx.beginPath();      ctx.moveTo(xTopLeft, yTop);      ctx.lineTo(xTopRight, yTop);      ctx.lineTo(xBottomRight, yBottom);      ctx.lineTo(xBottomLeft, yBottom);      ctx.closePath();      ctx.fill();    }  }}

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

transform: rotateX(180deg)