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>

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

相关文章
|
22天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
2天前
|
前端开发 JavaScript
用CSS画图——从三角形到吃豆人
用CSS画图——从三角形到吃豆人
|
13天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
12 0
|
14天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
18 0
|
16天前
|
前端开发
css声明方法
【4月更文挑战第14天】css声明方法
17 6
|
17天前
|
Web App开发 前端开发 开发者
css检查方法
【4月更文挑战第13天】css检查方法
14 2
|
17天前
|
XML 前端开发 开发者
css的常用方法
【4月更文挑战第13天】css的常用方法
13 3
|
23天前
|
前端开发
CSS多行省略的方法有哪些
CSS多行省略的方法有哪些
|
27天前
|
缓存 前端开发 UED
css优化的方法
css优化的方法
12 6
|
2月前
|
前端开发
CSS选择器十二种方法
CSS选择器十二种方法