关于前端:面试技巧老生常谈之-n-种使用-CSS-实现三角形的技巧

在一些面经中，常常能看到无关 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">&#9660; </div>

div {
    font-size: 100px;
    color: deeppink;
}

成果还是不错的：

然而，须要留神的是，应用字符示意三角形与以后设定的字体是强相干的，不同的字体绘制出的同一个字符是不一样的，我在 Google Font 上随机选取了几个不同的字体，别离示意同一个字符，失去的成果如下：

能够看到，不同字体的形态、大小及基线都是不一样的，所以如果你想应用字符三角形，确保用户的浏览器装置了你指定的字体，否则，不要应用这种形式。

残缺的比照 Demo，你能够戳这里：

CodePen Demo – 应用字符实现三角形

最初

好了，本文到此结束，对于应用 CSS 绘制三角的 6 种不同形式，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。