前言

【目的】

• 通过总结小伙伴们面试涉及到的问题，来进行前端知识的查漏补缺
• 给准备面试的小伙伴总结知识，也帮助自己更深入的了解前端知识。

【内容】

• 首先将介绍相关内容
• 然后列出常见的面试题型。

【温馨提示】

• 笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。

知识介绍

方法一：使用 border (常见)

【解释】不设置宽高，用边框大小控制三角型大小

【分解步骤】

1. 设置一个div不设宽高

   【示例】

   

2. 设置透明

   • 留下想要指向方向相反的边框设定，其他方向的边框设为transparent透明

   【示例】实现指向向上的三角形

   【效果图】指向上，指向下，指向左，指向右

   

如何设置不同的三角形

• 可以通过调整不同方向边框的值来实现不同方向和大小的三角形

方法二：使用 linear-gradient

【解释】两色渐变，调为实色，一色透明

【分解步骤】

1. 两色渐变

2. 调为实色

3. 一色透明

【效果图】

如何设置不同的三角形

• 通过旋转 rotate 或者 scale，也能得到各种角度，不同大小的三角形

方法三：使用 clip-path

【解释】裁剪多边型的方式，创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

【示例】

clip-path：

• polygon(x1 y1，x2 y2，x3 y3)；

了解更多clip-path属性

【效果图】

如何设置不同的三角形

• 可以借助CSS clip-path maker

方法四：利用字符

三角形形状的字符的十进制 Unicode 表示码

► 
▼ 
▲ 
⊿ 
△ 

【效果图】

【注意】用font-size控制大小，用color控制颜色

面试常见题目

简答题

【类似题目】

用CSS实现三角形

CSS画正方体，三角形

如何画一个三角形

......

结语

【感谢】

感谢程序员鱼皮提供面试鸭平台!!!

感谢各位读者能看到最后!!!