面试题六、利用 CSS 画出三角形图标有多少种方案？

在面试中经常会被问到：“想要利用css画出一个三角形，请问有多少种方法，并分别讲讲怎么实现的？”

当遇到这种问题，是不是有些词穷，知道一些但又知道的不全，或者听说过这样的方法，但是并没有手动实践过，也不知道是不是真的，如果你有过这些窘迫苦恼，那么你看这篇笔记就能轻松过面试官这一题的关卡了。

这篇文章不止讲述了如何利用css实现三角形的几种方案，还针对一些技术点进行了拓展，希望能够对大家有所帮助。

5种利用CSS画出三角形的方法

1. 利用 border 实现

这种方式主要是利用元素border去实现的，并为每条边设置颜色，显示需要展示的颜色，其他部分则设置为与背景色一致的颜色或者透明度即可，需要注意的点是需要宽高一定要一致，否则最后出现的效果可能是一个梯形。

.box{
    width: 0;
    height: 0;
    border: 100px;
    border-style: solid;
    border-color: orangered transparent gold yellowgreen;
    margin: 30px;
}

3. linear-gradient (渐变)

这种就是借助颜色渐变实现的，可以调整角度，起始颜色和结束颜色，这种方式实现的三角形可能会超出设置的宽高区域，那么必须要借助 background-size 属性去进行调整。

.box{
    width: 160px;
    height: 200px;
    background-repeat: no-repeat;
    background-image: linear-gradient(45deg, orangered 50%, transparent 50%);
    background-size: 100% 160px;
    margin: 30px;
}

同样需要注意的是：以目前demo样式为例，宽高一致，以45°角画，那么就是一个等腰三角形，这种情况就不需要借助background-size 属性进行微调。

.box {
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-image: linear-gradient(45deg, orangered 50%, transparent 50%);
    margin: 30px;
}

3. clip-path

   clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域，通过对图形进行裁剪，支持的属性有：

   • polygon：
     值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向，左上角为原点（0， 0），右下角是(100%,100%)的点。

     .box {
        	width: 100px;
         height: 100px;
         background-color: red;
         clip-path: polygon(0 0, 0% 100%, 100% 50%);  /* 上 下 右 */
         margin: 30px;
     }
     

     
     除了三角形还可以拓展其他的图形，例如：

     .box {
     	width: 400px;
     	height: 400px;
     	background-color: red;
     	clip-path: polygon(0 30%, 0% 70%, 60% 70%,60% 100%,100% 50%, 60% 0%, 60% 30%); 
     	margin: 30px;
     }
     

   

   通过这个属性可以实现很多很多可爱以及有趣的图标，等待你的杰作出现在我的评论里。

   可以参考以下图标尝试着画一画
   

   • circle：
     值为一个坐标点和半径组成，左上角为原点，右下角是(100%,100%)的点，定义半径的时候可以用at关键字来定义坐标。

     .box {
     	width: 200px;
     	height: 200px;
     	background-color: aquamarine;
     	clip-path: circle(50% at 50% 50%);
     	margin: 30px;
     }
     

     
     不过现在一般是不使用这种方式画圆，而是直接使用：border-radius: 50%
     这样直接设置四个角的角度进行设置。相当于平分到每个角的度数为 25%。

     另外还可以通过设置半径及坐标可以实现扇形效果，示例如下：

     .box {
          width: 200px;
          height: 200px;
          background-color: red;
          clip-path: circle(30% at 10% 10%);
          margin: 30px;
      }
     

   

   • ellipse：值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成，左上角为原点，右下角是(100%,100%)的点，at关键字将半径和坐标分开

     .box {
         width: 200px;
         height: 200px;
         background-color: red;
         clip-path: ellipse(50% 20% at 50% 50%);
         margin: 30px;
     }
     

   
   那么还能实现什么图形效果呢？那么可以参照上面 circle示例，改变一下左右半径或者定位坐标点，试试看，那么肯定有你想象不到的一些图形变化。

   • inset：值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)，round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制。

     .box {
         width: 200px;
         height: 200px;
         background-color: red;
         clip-path: inset(25% 0% 25% 0% round 0% 25% 0% 25%);
         margin: 30px;
     }
     

   

4. 利用transform: rotate() + 父级元素ovrflow 实现

5. 利用字符绘制三角形

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

好了，今天的笔记记录到此就算是结束了，如果你觉得有用请给一个点赞或者收藏，如果有补充的请多多评论留言，如有不正确之处也请评论留言多多指正。