CSS画三角形

在前端开发过程中，有时候需要自己写下拉框，这时候一个小三角形可实现下拉框的指向效果，如下图所示。

所以本文就记录一下我画三角形的思路以及实现方法。

实现方式

        利用盒子的边框实现

        配合旋转可以实现任意方向任意角度的三角形；

        假如面试官问你如何用CSS实现三角形效果，这时，你可以反问他，你需要尖尖朝哪个方向的、尖尖角度是多少的三角形，这也许会让他对你高看一眼哦~

实现过程描述

        首先，我们来看一样下面的东西

        这是一个普通的正方形盒子，其中边长为200px，边框为100px，四边的边框颜色都不一样，大家试想一下，如果盒子的边长没有了，只剩下边框之后会发生什么？你想的没错，会出现四个颜色不一样的三角形，如下图

        看，三角形不就出来了吗，但是我只想要一个三角形怎么办？很简单，只需要将其他三条边框设置成透明的就行了，这里我保留最上面的边框，

        代码实现可以用rgba(0,0,0,0)来实现透明效果，也可以直接使用transparent

.box {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid rgba(0, 0, 0, 0);
    border-bottom: 100px solid rgba(0, 0, 0, 0);
    border-left: 100px solid rgba(0, 0, 0, 0);
  }

        or

.box {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-left: 100px solid transparent;
  }

        要实现任意角度怎么办呢？也很简单，只需要计算好各个方向的边框宽度即可实现，比如我想要实现一个尖尖是60°的三角形，左右边框宽度设置成100px，则上下边框需要100✖根号三的宽度，即大约173px

.box {
    width: 0;
    height: 0;
    border-top: 173px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 173px solid gray;
    border-left: 100px solid transparent;
  }

        得到的效果图如下

        是不是很简单？唯一麻烦点的估计是计算边框宽度，不过大家都是接受过高等教育的知识分子，不至于这点麻烦就让你停止了脚步吧，只是简简单单的等腰三角形计算而已

        至于配合旋转我就不多说了。