共计 2931 个字符，预计需要花费 8 分钟才能阅读完成。
在一些面经中，常常能看到无关 CSS 的题目都会有一道 如何应用 CSS 绘制三角形，而常常的答复通常也只有应用 border 进行绘制一种办法。
而 CSS 倒退到明天，其实有很多有意思的仅仅应用 CSS 就能绘制进去的三角形的形式，本文将具体列举讲讲。
通过本文，你能理解到 6 种应用 CSS 绘制三角形的形式，并且它们都十分好把握。当然本文仅是抛砖引玉，CSS 突飞猛进，可能还有一些有意思的办法本文脱漏了，欢送大家在留言区补充~
应用 border 绘制三角形
应用 border 实现三角形应该是大部分人都把握的，也是各种面经中经常出现的，利用了高宽为零的容器及通明的 border 实现。
简略的代码如下：
div {
border-top: 50px solid yellowgreen;
border-bottom: 50px solid deeppink;
border-left: 50px solid bisque;
border-right: 50px solid chocolate;
}高宽为零的容器，设置不同色彩的 border：
这样，让任何三边的边框的色彩为 transparent，则非常容易失去各种角度的三角形：
CodePen Demo – 应用 border 实现三角形
应用 linear-gradient 绘制三角形
接着，咱们应用线性突变 linear-gradient 实现三角形。
它的原理也非常简单，咱们实现一个 45° 的突变：
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, yellowgreen);
}
让它的色彩从渐变色变为两种固定的色彩：
div {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}
再让其中一个色彩通明即可：
div {background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}
通过旋转 rotate 或者 scale，咱们也能失去各种角度，不同大小的三角形，残缺的 Demo 能够戳这里：
CodePen Demo – 应用线性突变实现三角形
应用 conic-gradient 绘制三角形
还是突变，上述咱们应用了线性突变实现三角形，有意思的是，在突变家族中，角向突变 conic-gradient 也能够用于实现三角形。
办法在于，角向突变的圆心点是能够设置的，相似于径向突变的圆心点也能够被设置。
咱们将角向突变的圆心点设置于 50% 0，也就是 center top，容器最上方的两头，再进行角向突变，突变到肯定的角度范畴内，都是三角形图形。
假如咱们有一个 200px x 100px 高宽的容器，设置其角向突变圆心点为 50% 0：
并且，设置它从 90° 开始画角向突变图，示意图如下：
能够看到，在初始的时候，角向突变图形没有到第二条边的之前，都是三角形，咱们选取适宜的角度，非常容易的能够失去一个三角形：
div {background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}
上述代码中的 deeppink 45deg, transparent 45.1deg 多进去的 0.1deg 是为了简略打消突变产生的锯齿的影响，这样，咱们通过 conic-gradient，也轻松的失去了一个三角形。
同理，再配合旋转 rotate 或者 scale，咱们也能失去各种角度，不同大小的三角形，残缺的 Demo 能够戳这里：
CodePen Demo – 应用角向突变实现三角形
transform: rotate 配合 overflow: hidden 绘制三角形
这种办法还是比拟惯例的，应用 transform: rotate 配合 overflow: hidden。一看就懂，一学就会，简略的动画示意图如下：
设置图形的旋转核心在左下角 left bottom，进行旋转，配合 overflow: hidden。
残缺的代码：
.triangle {
width: 141px;
height: 100px;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: deeppink;
transform-origin: left bottom;
transform: rotate(45deg);
}
}CodePen Demo – transform: rotate 配合 overflow: hidden 实现三角形
应用 clip-path 绘制三角形
clip-path 一个十分有意思的 CSS 属性。
clip-path CSS 属性能够创立一个只有元素的局部区域能够显示的剪切区域。区域内的局部显示，区域外的暗藏。剪切区域是被援用内嵌的 URL 定义的门路或者内部 SVG 的门路。
也就是说，应用 clip-path 能够将一个容器裁剪成任何咱们想要的样子。
通过 3 个坐标点，实现一个多边形，多余的空间则会被裁减掉，代码也非常简单：
div {
background: deeppink;
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
CodePen Demo – 应用 clip-path 实现三角形
在这个网站中 — CSS clip-path maker，你能够快捷地创立简略的 clip-path 图形，失去对应的 CSS 代码。
利用字符绘制三角形
OK，最初一种，有些独特，就是应用字符示意三角形。
上面列出一些三角形形态的字符的十进制 Unicode 示意码。
◄ : ◄
► : ►
▼ : ▼
▲ : ▲
⊿ : ⊿
△ : △譬如，咱们应用 ▼ 实现一个三角形 ▼，代码如下：
<div class="normal">▼ </div>div {
font-size: 100px;
color: deeppink;
}成果还是不错的：
然而，须要留神的是，应用字符示意三角形与以后设定的字体是强相干的，不同的字体绘制出的同一个字符是不一样的，我在 Google Font 上随机选取了几个不同的字体，别离示意同一个字符，失去的成果如下：
能够看到，不同字体的形态、大小及基线都是不一样的，所以如果你想应用字符三角形，确保用户的浏览器装置了你指定的字体，否则，不要应用这种形式。
残缺的比照 Demo，你能够戳这里：
CodePen Demo – 应用字符实现三角形
最初
好了，本文到此结束，对于应用 CSS 绘制三角的 6 种不同形式，心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
