CSS画三角形(三种方法)

简介: 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>

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关文章
|
10天前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
13天前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
28天前
|
前端开发
如何使用css写三角形
如何使用css写三角形
23 4
|
30天前
|
前端开发
用纯 CSS 创建一个三角形
使用纯 CSS 可以通过边框技巧创建三角形。例如,要创建一个指向下方的等边三角形,可以将 `width` 和 `height` 设为 `0`,并通过透明的左右边框和有颜色的底边来形成三角形。
|
1月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
22 1
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
14 2
|
2月前
|
前端开发
CSS制作小三角形
CSS制作小三角形
15 1
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
19 3
|
29天前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
21 0
|
1月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法