当前位置: 首页 > news >正文

CSS画三角形(三种方法)

使用CSS画一个三角形,想必部分同学都有一个小疑问,css怎么做三角形,让我为大家介绍一下吧!

第一种方法

div {width: 0;height: 0;border-style: solid;border-width: 50px;border-color: transparent transparent black transparent;
}

在这里插入图片描述

第二种方法 如果我不给div设置宽度和高度能不能做

我们把div转换成行内块元素即可

div {display: inline-block;border-style: solid;border-width: 50px;border-color: transparent transparent black transparent;
}

在这里插入图片描述

第三种方法 canvas

<body><canvas id="myCanvas" width="100" height="100">1</canvas>
</body>
<script>const trigon = () => {let canvas = document.getElementById('myCanvas');let ctx = canvas.getContext('2d');ctx.moveTo(50, 20);ctx.lineTo(0, 90);ctx.lineTo(100, 90);//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做ctx.closePath();ctx.stroke(); //绘制路径。}trigon()
</script>

在这里插入图片描述
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

http://www.lryc.cn/news/213956.html

相关文章:

  • (一)、ts 基础类型 及class类举例字符雨和实现vue的挂在#app
  • C++对象的内存分布和虚函数表
  • 小白怎么学习性能测试?一文7个知识点带你成功入门!
  • Orcad属性过滤器的使用技巧
  • 腾讯云向量数据库正式对外全量开放公测
  • Linux新建普通用户无法使用退格键与tab键
  • 【湘粤鄂车牌】
  • 华大-HC32L130F8UA 内存使用注意事项
  • 怎样才知道一个单片机的性能到极限了?
  • Android Studio的笔记--SerialPort串口通讯学习和使用
  • MySQL 启动选项和字符集
  • 社区投稿|解码Big Vector,开启Sui超扩展性的新篇章
  • Linux根目录下的目录结构及其作用详解
  • 源码和SaaS账号:租房与自建房的区别
  • Docker容器设置为自动重启
  • 速卖通卖家如何通过自己搭建测评补单系统,提高产品权重和排名?
  • 香港金融科技周2023:AIGC重塑金融形态
  • 6G关键新兴技术-智能超表面(RIS)技术演进
  • 怎么让小程序排名靠前?小程序搜索排名问题
  • 使用Postman快速复现浏览器的请求(包括生成调用代码)
  • 四则运算的正则校验
  • 【备忘录】SpringBoot+ dynamic-datasource配置自定义多数据源
  • 制作docker镜像文件
  • JAVA 中 Socket 和 WebSocket 区别
  • python 接收到一个接口的数据 是json格式 ,然后把其中键值对的一个值改掉 再返回给接口
  • ⌈C++11⌋实现一个简易计算器
  • 面试算法45:二叉树最低层最左边的值
  • Could not find org.jetbrains.kotlin:kotlin-stdlib-jre7:1.5.21.
  • LoRaWan之LoRaMAC 的快速入门指南
  • 中国教育企业出海 新兴技术助力抢占先机