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

CSS画三角形(三种方法)

news 2026/4/2 2:55:32

使用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>

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

相关文章：

CSS画三角形(三种方法)

使用CSS画一个三角形&#xff0c;想必部分同学都有一个小疑问&#xff0c;css怎么做三角形&#xff0c;让我为大家介绍一下吧&#xff01; 第一种方法 div {width: 0;height: 0;border-style: solid;border-width: 50px;border-color: transparent transparent black transpa…...

编程日记 2023/11/1 17:00:13

(一)、ts 基础类型 及class类举例字符雨和实现vue的挂在#app

文章目录 前言环境执行依赖node.js一、基础数据类型二、任意类型三、接口和对象类型四、 数组类型五、函数重载六、类型断言断言联合类型交叉类型 七、内置对象-Promise基础对象DOM和BOMPromise ts化代码雨案例 八、Class类(派生类和抽象类)派生类 abstract抽象类 classClass简…...

编程日记 2023/11/1 16:59:12

C++对象的内存分布和虚函数表

Linux C/C 开发(后端/音视频/游戏/嵌入式/高性能网络/存储/基础架构/安全) c中一个类中无非有四种成员&#xff1a;静态数据成员和非静态数据成员&#xff0c;静态函数和非静态函数。 1.非静态数据成员被放在每一个对象体内作为对象专有的数据成员。 2.静态数据成员被提取出来…...

编程日记 2023/11/1 16:58:10

小白怎么学习性能测试？一文7个知识点带你成功入门！

1.什么是性能测试 性能测试是通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。负载测试和压力测试都属于性能测试&#xff0c;两者可以结合进行。通过负载测试&#xff0c;确定在各种工作负载下系统的性能&#xff0c;目标是测试当负…...

编程日记 2023/11/1 16:57:09

Orcad属性过滤器的使用技巧

Orcad内置的属性过滤器可以完美的解决由于属性太多导致的不好整理的问题。下面简单介绍一下方法和过程。 1、打开过滤器 2、新建属于自己的过滤器 3、进行器件属性过滤及调整的顺序&#xff08;注这时一定关闭ORCAD&#xff0c;来操作&#xff09; 3.1 安装目录下找到\Cadenc…...

编程日记 2023/11/1 16:54:06

腾讯云向量数据库正式对外全量开放公测

11月1日&#xff0c;腾讯云对外宣布向量数据库正式全量开放公测&#xff0c;同时性能层面带来巨大提升。腾讯云数据库副总经理罗云表示&#xff0c;除了公测之外&#xff0c;腾讯云向量数据库单索引已经支持百亿级向量规模&#xff0c;支持百万级QPS毫秒级查询延迟&#xff0c;…...

编程日记 2023/11/1 16:53:04

Linux新建普通用户无法使用退格键与tab键

创建普通用户 useradd mulan passwd mulan 切换用户 su mulan 发现普通用户无法使用退格键与tab键&#xff0c;一直显示如图 如图&#xff0c;按退格键(Backspace)、删除键出现 ‘^H’ 符号&#xff0c;tab键也不能自动拼写 这是新用户下的普通bash配置都没有&#xff0c;从…...

编程日记 2023/11/1 16:52:03

【湘粤鄂车牌】

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2023/11/1 16:48:59

华大-HC32L130F8UA 内存使用注意事项

1,概念 本系统包含一块 64K 字节&#xff08; Byte &#xff09;容量的 FLASH 存储器&#xff0c;共划分为 128 个页&#xff08; Sector &#xff09;&#xff0c;每个页&#xff08; Sector &#xff09; 的容量为 512 字节&#xff08; Byte &#xff09;。 FLASH …...

编程日记 2023/11/1 16:47:58

怎样才知道一个单片机的性能到极限了？

怎样才知道一个单片机的性能到极限了&#xff1f; 就题主的问题&#xff0c;应该是想问CPU利用率的问题。可以看看Rt-thread中关于统计CPU利用率函数&#xff0c;其主要实现方式是在idle线程先关闭中断计数后&#xff0c;正常计数(可被其他线程打断)&#xff0c;最近很多小伙伴…...

编程日记 2023/11/1 16:46:57

Android Studio的笔记--SerialPort串口通讯学习和使用

SerialPort串口通讯学习和使用 SerialPortandroid-serialport-api源码下载 Android-SerialPort-API源码下载readme版本 Android-SerialPort-Tool源码下载 Android-Serialport源码下载使用方法readme android中使用串口通信使用android-serialport-api方式第1种 链接第2种 导入S…...

编程日记 2023/11/1 16:45:54

MySQL 启动选项和字符集

1. 客户端和服务器 1.1 服务器程序 数据库实例&#xff1a;代表 MySQL 服务器程序的进程&#xff08; mysqld 可执行文件&#xff09; mysqld_safe&#xff1a;启动脚本&#xff0c;会间接调用 mysqld 并监控服务器运行状态。出现错误时可以帮助重启服务器程序&#xff0c;输…...

编程日记 2023/11/1 16:44:53

社区投稿｜解码Big Vector，开启Sui超扩展性的新篇章

* 本文是来自Sui生态项目Typus团队的投稿&#xff0c;文中「我们」均指代该项目团队&#xff0c;转载时修改部分不准确的用词。 本研究报告介绍了Big Vector的概念&#xff0c;这是一种我们用于 Typus V2 的新数据结构&#xff0c;以缓解 Sui 上数组和动态字段(dynamic field)…...

编程日记 2023/11/1 16:43:52

Linux根目录下的目录结构及其作用详解

Linux根目录是文件系统的最顶层&#xff0c;它包含了一些子目录&#xff0c;每个子目录都有特定的功能和存储的文件。只有了解了各个文件的使用功能&#xff0c;才能更好的去使用Linux系统。希望通过下面这张图能够让你更加了解根目录下的各个目录的功能。...

编程日记 2023/11/1 16:42:51

源码和SaaS账号：租房与自建房的区别

在当今数字化时代&#xff0c;软件已成为企业运营的重要支撑。然而&#xff0c;对于许多中小企业来说&#xff0c;获取和运营软件的方式有两种&#xff1a;源码和SaaS账号。这两者有何区别呢&#xff1f;让我们用租房和自建房的比喻来解释。 价格比较 源码&#xff1a;购买源码…...

编程日记 2023/11/1 16:41:50

Docker容器设置为自动重启

有时Docker服务出现异常&#xff0c;或者服务器出现异常&#xff0c;需要重启Docker服务或者服务器&#xff1b; 如果希望有一部分基础的或者常用的容器&#xff0c;在服务或者服务器重启的时候&#xff0c;可以实现自动启动&#xff0c;仅需使用命令进行简单配置即可实现。 D…...

编程日记 2023/11/1 16:38:46

速卖通卖家如何通过自己搭建测评补单系统，提高产品权重和排名？

速卖通卖家如何给店铺增加权重和排名&#xff1f; 在竞争激烈的速卖通平台上&#xff0c;为自己的店铺增加权重是吸引更多买家和提升销售的关键。店铺的权重决定着在搜索排名、推荐位和广告展示方面的优先级。今天珑哥为您介绍一些有效的策略&#xff0c;帮助您提升速卖通店铺…...

编程日记 2023/11/1 16:37:44

香港金融科技周2023：AIGC重塑金融形态

10月31日&#xff0c;由香港财经事务及库务局与投资推广署主办的“香港金融科技周2023大湾区专场”盛大启幕。中国AI决策领先企业萨摩耶云科技集团创始人、董事长兼 CEO林建明受邀参加圆桌会议&#xff0c;与中国内地、香港以及全球金融科技行业顶尖人才、创新企业、监管机构和…...

编程日记 2023/11/1 16:35:42

6G关键新兴技术-智能超表面(RIS)技术演进

一、产品定义及范围 根据欧盟5G公私联盟协会(5G Infrastructure Public-Private Partnership, 5GPP)定义&#xff0c;可重构智慧表面(Reconfigurable Intelligent Surface, RIS)技术是由能够任意塑造电磁波面的材料组成&#xff0c;几乎是被动(Passice)设备&#xff0c;可以适…...

编程日记 2023/11/1 16:33:40

怎么让小程序排名靠前？小程序搜索排名问题

小程序的排名是十分重要的&#xff0c;因为这会直接影响到用户的点击率&#xff0c;用户在搜索小程序时&#xff0c;会看到搜索引擎的前几条搜索结果&#xff0c;如果您的小程序不在这些位置上&#xff0c;很可能就会被忽略&#xff0c;所以&#xff0c;想要让用户能够看到您的…...

编程日记 2023/11/1 16:31:37

抑制素A抗体如何提升妊娠中期唐氏综合征筛查的效能？

一、为何抑制素A成为妊娠期的重要生物标志物&#xff1f;抑制素A是一种由α和βA亚基通过二硫键连接形成的异源二聚体糖蛋白。在非妊娠期&#xff0c;它主要由卵巢颗粒细胞分泌&#xff0c;作为反馈调节因子&#xff0c;选择性地抑制垂体前叶分泌卵泡刺激素。进入妊娠状态后&am…...

编程新知 2026/4/1 23:44:29

解锁3大智能功能：League-Toolkit让普通玩家也能玩转专业级游戏分析

解锁3大智能功能&#xff1a;League-Toolkit让普通玩家也能玩转专业级游戏分析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在英雄联盟的召…...

编程新知 2026/4/1 22:55:39

【米家IoT开发】巧用Charles抓包，高效定位与调试网络接口

1. 为什么Charles是米家IoT开发的调试神器 当你开发米家扩展程序时&#xff0c;最头疼的莫过于接口返回异常数据&#xff0c;或者请求莫名其妙失败。这时候如果只能靠猜问题出在哪里&#xff0c;那简直就是在黑暗中摸索。我刚开始做米家IoT开发时&#xff0c;就经常被这种问题困…...

编程新知 2026/4/1 22:53:39

开源！手搓ESP-VoCat 喵伴桌面AI助手，帮你养萌宠 OpenClaw龙虾，内置豆包，会听、会动、会陪伴

模组选型&#xff1a;ttps://item.taobao.com/item.htm?ftt&id1033585120956&spma21dvs.23580594.0.0.4fee2c1bAqCiqc&skuId6211360130611 ESP-VoCat 喵伴是乐鑫携手火山引擎扣子大模型团队打造的智能 AI 开发套件&#xff0c;适用于玩具、智能音箱、智…...

编程新知 2026/4/1 21:12:15

坚定信心，顺势而为 ——中国企业出海与人工智能时代语言服务行业的新机遇

坚定信心&#xff0c;顺势而为——中国企业出海与人工智能时代语言服务行业的新机遇前言人工智能技术的逐步成熟以及智能体的普遍应用是最近两三年的热点和趋势&#xff0c;很多人说&#xff0c;2026年是智能体爆发的元年。春节期间&#xff0c;豆包、千问、元宝等50亿元的红包…...

编程新知 2026/4/1 21:10:12

AI报告文档审核赋能数据不出域：IACheck重构机械制造行业本地化质量管控体系

在机械制造行业不断推进数字化与智能化转型的过程中&#xff0c;“数据不出域”逐渐从合规要求演变为一种核心能力&#xff0c;即在保障数据安全的前提下&#xff0c;实现数据的高效利用与价值转化&#xff0c;而在这一背景下&#xff0c;检测报告作为连接生产过程与质量评估的…...

编程新知 2026/4/1 19:15:04

Windows环境下ODBC连接MySQL保姆级教程（含性能优化配置）

Windows环境下ODBC连接MySQL全流程实战指南 1. 环境准备与驱动安装 在Windows平台使用ODBC连接MySQL数据库&#xff0c;首先需要确保开发环境配置正确。与JDBC不同&#xff0c;ODBC作为跨语言的数据库连接标准&#xff0c;其驱动安装过程需要特别注意版本兼容性问题。以下是环境…...

编程新知 2026/4/1 19:13:04

Topgrade性能优化技巧：提升大规模更新效率的5种方法

Topgrade性能优化技巧&#xff1a;提升大规模更新效率的5种方法 【免费下载链接】topgrade Upgrade all the things 项目地址: https://gitcode.com/gh_mirrors/top/topgrade Topgrade是一款强大的系统更新工具&#xff0c;它能自动检测并升级系统中的所有包管理器、编程…...

编程新知 2026/4/1 19:11:02

Qwen3-TTS-12Hz-1.7B-Base应用场景：智能音箱多语种交互语音引擎升级

Qwen3-TTS-12Hz-1.7B-Base应用场景&#xff1a;智能音箱多语种交互语音引擎升级 重要提示&#xff1a;本文仅讨论技术实现方案&#xff0c;所有内容均基于公开技术文档和测试数据&#xff0c;不涉及任何政治敏感内容&#xff0c;完全符合内容安全规范。 1. 智能音箱语音交互的现…...

编程新知 2026/4/1 19:02:56

10分钟掌握Deep-Live-Cam：从零搭建实时AI换脸系统的完整指南

10分钟掌握Deep-Live-Cam&#xff1a;从零搭建实时AI换脸系统的完整指南 【免费下载链接】Deep-Live-Cam real time face swap and one-click video deepfake with only a single image 项目地址: https://gitcode.com/GitHub_Trending/de/Deep-Live-Cam Deep-Live-Cam是…...

编程新知 2026/4/1 18:36:24