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

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)
相关推荐
万少3 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL9 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0224 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang26 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼28 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿30 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再33 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55537 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录42 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000043 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试