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

1.css画

说明:css画出倒梯形

javascript 复制代码
  <div class="outer-box">
  <div class="gradient_bg"></div>
  </div>
javascript 复制代码
.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

说明:画出正梯形

javascript 复制代码
    <canvas id="trapezoidCanvas" width="200" height="100"></canvas>
javascript 复制代码
<script>
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();
    }
  }
}
</script>

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

javascript 复制代码
transform: rotateX(180deg)
相关推荐
老坛0014 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛0015 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾8 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐12 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价13 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花14 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101314 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树15 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜16 分钟前
跨平台UI自动化-Appium
前端
海底火旺17 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js