CSS画三角形(三种方法)

最新推荐文章于 2025-05-14 17:03:41 发布

原创最新推荐文章于 2025-05-14 17:03:41 发布 · 1.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

CSS+C3+H5 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了三种在CSS中创建三角形的方法：使用边框样式、将div转换为行内块元素以及利用HTML5canvas的2d上下文。通过实例展示了如何实现这些技巧。

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