完整的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
CodePen Demo - transform: rotate 配合 overflow: hidden 实现三角形
https://codepen.io/Chokcoco/pen/LYxyyPv
使用 clip-path 绘制三角形
clip-path 一个非常有意思的 CSS 属性。
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。
也就是说，使用 clip-path 可以将一个容器裁剪成任何我们想要的样子。
通过 3 个坐标点，实现一个多边形，多余的空间则会被裁减掉，代码也非常简单：
1 2 3 4 |
|
CodePen Demo - 使用 clip-path 实现三角形
https://codepen.io/Chokcoco/pen/GRrmEzY
在这个网站中 -- CSS clip-path maker，你可以快捷地创建简单的 clip-path 图形，得到对应的 CSS 代码。
利用字符绘制三角形
OK，最后一种，有些独特，就是使用字符表示三角形。
下面列出一些三角形形状的字符的十进制 Unicode 表示码。
1 2 3 4 5 6 |
|
譬如，我们使用 ▼ 实现一个三角形 ?，代码如下：
1 |
|
1 2 3 4 |
|
效果还是不错的：
然而，需要注意的是，使用字符表示三角形与当前设定的字体是强相关的，不同的字体绘制出的同一个字符是不一样的，我在 Google Font 上随机选取了几个不同的字体，分别表示同一个字符，得到的效果如下：
可以看到，不同字体的形状、大小及基线都是不一样的，所以如果你想使用字符三角形，确保用户的浏览器安装了你指定的字体，否则，不要使用这种方式。
完整的对比 Demo，你可以戳这里：
CodePen Demo - 使用字符实现三角形
https://codepen.io/Chokcoco/pen/abpWyzy
最后
好了，本文到此结束，关于使用 CSS 绘制三角的 6 种不同方式，希望对你有帮助 :)
原文地址：https://segmentfault.com/a/1190000039808190
作者：chokcoco
更多编程相关知识，请访问：编程视频！！
以上就是利用CSS绘制三角形的6种技巧（分享）的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
