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>

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

相关文章
|
7天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
7天前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
|
7天前
|
前端开发 JavaScript
用CSS画图——从三角形到吃豆人
用CSS画图——从三角形到吃豆人
|
7天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
13 0
|
7天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
21 0
|
7天前
|
前端开发
css声明方法
【4月更文挑战第14天】css声明方法
19 6
|
7天前
|
Web App开发 前端开发 开发者
css检查方法
【4月更文挑战第13天】css检查方法
19 2
|
7天前
|
XML 前端开发 开发者
css的常用方法
【4月更文挑战第13天】css的常用方法
15 3
|
7天前
|
前端开发
CSS多行省略的方法有哪些
CSS多行省略的方法有哪些
|
7天前
|
缓存 前端开发 UED
css优化的方法
css优化的方法
14 6