CSS画三角形(三种方法)

news2024/11/26 5:38:11

使用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.coloradmin.cn/o/1161103.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

学习笔记二十八:K8S控制器Daemonset入门到企业实战应用

DaemonSet控制器&#xff1a;概念、原理解读 DaemonSet概述DaemonSet工作原理&#xff1a;如何管理PodDaemonset典型的应用场景DaemonSet 与 Deployment 的区别DaemonSet资源清单文件编写技巧 DaemonSet使用案例&#xff1a;部署日志收集组件fluentdDaemonset管理pod&#xff1…

PyTorch深度学习实战(24)——从零开始实现Mask R-CNN实例分割

PyTorch深度学习实战&#xff08;24&#xff09;——从零开始实现Mask R-CNN实例分割 0. 前言1. Mask R-CNN1.1 网络架构1.2 RoI Align1.3 Mask 检测头 2. 使用 Mask R-CNN 实现实例分割2.1 数据集分析2.2 模型构建策略2.3 模型构建与训练 3. 多类别实例分割小结系列链接 0. 前…

Zabbix监控nginx状态

文章目录 zabbix监控nginx状态环境前期准备开启nginx状态页面配置监控 zabbix监控nginx状态 环境 主机名IP地址角色安装的软件zabbix192.168.179.100zabbix服务端zabbix_serverzabbix_agentwanf192.168.179.11nginxzabbix客户端nginxzabbix_agent 前期准备 部署nginx请阅读…

删除排序链表中的重复节点II(C++解法)

题目 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,3,4,4,5] 输出&#xff1a;[1,2,5]示例 2&#xff1a; 输入&#xff1a;head [1…

火影忍者游戏攻略大公开!成为忍者大师的秘诀揭秘

大家好&#xff01;作为火影忍者游戏的玩家&#xff0c;我们都希望能够在游戏中成为优秀的忍者大师&#xff0c;战胜强大的对手。为了帮助大家实现这一目标&#xff0c;我想分享一些实用的攻略和技巧。 首先&#xff0c;熟悉忍者技能是成为忍者大师的基础。在火影忍者游戏中&am…

Pytorch 注意力机制解析与代码实现

什么是注意力机制 注意力机制是深度学习常用的一个小技巧&#xff0c;它有多种多样的实现形式&#xff0c;尽管实现方式多样&#xff0c;但是每一种注意力机制的实现的核心都是类似的&#xff0c;就是注意力。 注意力机制的核心重点就是让网络关注到它更需要关注的地方。 当…

Elasticsearch 集群分片出现 unassigned 其中一种原因详细还原

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…

miniconda快速安装

目录 一、Linux下miniconda安装 1.1、安装 1.2、miniconda初始化 二、Windows下miniconda安装 三、maOS下miniconda安装 3.1、安装 3.2、miniconda初始化 四、参考&#xff1a; 本文给出windows、macos、linux下快速安装miniconda方法。 对比conda&#xff0c;minicond…

XUbuntu22.04之simplenote支持的Markdown语法总结(一百九十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

Qwt 使用QwtDial绘制钟表

1.概述 QwtDial是Qwt库中的一个类&#xff0c;用于绘制一个可旋转的仪表盘&#xff0c;QwtAnalogClock继承自QwtDial&#xff0c; 模拟时钟。 以下是类继承关系&#xff1a; 2.运行结果 自定义Clock类&#xff0c;继承自QwtAnalogClock&#xff0c;增加一个QTimer&#xff0…

【计算机网络笔记】传输层——可靠数据传输之流水线机制与滑动窗口协议

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

基于tpshop开发多商户源码支持手机端+商家+门店 +分销+淘宝数据导入+APP+可视化编辑

tpshop多商户源码,tpshop商城源码,tpshop b2b2c源码-支持手机端商家门店 分销淘宝数据导入APP可视化编辑 tpshop商城源码算是 thinkphp框架里做的比较早 比较好的源码了&#xff0c;写法简明 友好面向程序猿。 这是一款前几年的版本 虽然后台看着好了些&#xff0c;丝毫不影响…

【Linux】关于Nginx的详细使用,部署项目

前言&#xff1a; 今天小编给大家带来的是关于Nginx的详细使用&#xff0c;部署项目&#xff0c;希望可以给正在学习&#xff0c;工作的你带来有效的帮助&#xff01; 一&#xff0c;Nginx简介 Nginx是一个高性能的开源Web服务器和反向代理服务器。它最初由Igor Sysoev在2004年…

探讨jdk源码中的二分查找算法返回值巧妙之处

文章目录 1.什么是二分查找算法1.1 简介1.2 实现思路 2.二分查找的示例3.jdk 中的 Arrays.binarySearch()4.jdk 中核心二分查找方法解析4.1 为什么 low 是插入点4.2 为什么要进行取反&#xff1a;-&#xff08;low 1&#xff09;4.3 为什么不直接返回 插入点 low 的相反数&…

MySQL学习-获取排名,按行更新

获取排名 需求&#xff1a;获取分类平均值的名次&#xff1f; 比如10个班级的平均分&#xff0c;按照班级名称排序&#xff0c;后面跟着名次。 记录表&#xff1a;student &#xff1b; 字段&#xff1a;banji 班级&#xff1b;AvgS 平均分&#xff1b;pm 排名&#xff1b…

解决问题Conda:CondaValueError: Malformed version string ‘~’ : invalid character(s)

解决问题Conda&#xff1a;CondaValueError: Malformed version string ‘~’ : invalid character(s) 背景 今天使用Conda构建项目运行环境的时候报错&#xff1a;&#xff1a;CondaValueError: Malformed version string ‘~’ : invalid character(s) ##报错问题 在安装te…

Express框架开发接口之书城商店原型图

这是利用Axure画的&#xff0c;简单画一下原型图&#xff0c;根据他们的业务逻辑我们完成书城商店API开发 首页 分类 购物车 个人中心

探索C++中的不变之美:const与构造函数的深度剖析

W...Y的主页&#x1f60a; 代码仓库分享&#x1f495; &#x1f354;前言&#xff1a; 关于C的博客中&#xff0c;我们已经了解了六个默认函数中的四个&#xff0c;分别是构造函数、析构函数、拷贝构造函数以及函数的重载。但是这些函数都是有返回值与参数的。提到参数与返回…

Spring Security 6.1.x 系列(4)—— 基于过滤器链的源码分析

一、自动配置 在 Spring Security 6.1.x 系列&#xff08;1&#xff09;—— 初识Spring Security 中我们只引入spring-boot-starter-security 依赖&#xff0c;就可以实现登录认证&#xff0c;这些都得益于Spring Boot 的自动配置。 在spring-boot-autoconfigure模块中集成了…

MyBitis自动拼接了LIMIT

1.前言 最近系统在运营的过程中发现一个很奇怪的问题&#xff0c;莫名其妙的SQL语句会被拼接上一小段SQL&#xff0c;但是发现这被拼接的SQL并不是当前这个API所使用的SQL&#xff0c;因此导致select语句出错。 2.排查思路 2.1.第一步 首先我排查了打印日志里面的错误对应的…