作为前端面试官，我经常会在面试中问："如何用纯 CSS 画一个三角形？"、"不用图片，如何实现一个扇形？"这些问题看似简单，却能很好地考察候选人对 CSS 基础知识的理解深度。
1. 三角形 - 最经典的面试题
实现代码
.trangle {
width: 5px;
height: 5px;
border: 10px solid transparent;
border-top-color: #f00;
}
核心原理
面试官常问：为什么这样能画出三角形？
关键在于理解边框的绘制机制：
- 边框是梯形：当元素有宽高时，边框是梯形的，不是矩形
- 元素尺寸为 0：当元素宽高很小（接近 0）时，边框就变成了三角形
- 透明边框：将不需要的边框设为透明，只显示需要的边框
绘制过程解析
步骤1: 创建一个 5px × 5px 的小盒子
步骤2: 设置 10px 的边框（边框宽度 > 元素尺寸）
步骤3: 所有边框设为透明
步骤4: 只让上边框显示红色
结果: 得到一个向下的红色三角形
面试扩展问题
Q1: 如何画不同方向的三角形？
/* 向上 */
border-bottom-color: #f00;
border-top-color: transparent;
/* 向左 */
border-right-color: #f00;
border-left-color: transparent;
/* 向右 */
border-left-color: #f00;
border-right-color: transparent;
Q2: 如何画等腰三角形？
调整元素宽高比例，或者使用伪元素配合定位。
Q3: 实际应用场景？
- 对话框的气泡箭头
- 下拉菜单的指示箭头
- 工具提示（tooltip）的箭头
- 进度条的箭头指示器
2. 扇形 - border-radius 的巧妙运用
方法一：border-radius + 正方形
.sector {
width: 100px;
height: 100px;
border-radius: 100px 0 0; /* 只设置左上角圆角 */
background-color: #00f;
/* transform: rotate(45deg); */ /* 可选：旋转角度 */
}
核心原理
面试官常问：border-radius: 100px 0 0 是什么意思？
这是 border-radius 的简写语法：
- 1个值：四个角都是这个值
- 2个值：第一个值 = 左上和右下，第二个值 = 右上和左下
- 3个值：第一个值 = 左上，第二个值 = 右上和左下，第三个值 = 右下
- 4个值：顺时针方向（左上 → 右上 → 右下 → 左下）
所以 100px 0 0 表示：
- 左上角：100px（圆角半径等于边长，形成 1/4 圆）
- 右上角：0（直角）
- 右下角：0（直角）
- 左下角：0（直角）
方法二：边框 + border-radius
.sector2 {
border: 100px solid transparent;
width: 0;
border-radius: 100px;
border-top-color: #f00;
}
两种方法对比
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| border-radius | 代码简洁，易于理解 | 只能画 1/4 圆 | 简单的扇形图标 |
| 边框方法 | 可以画任意角度的扇形 | 代码稍复杂 | 需要精确控制角度 |
面试扩展问题
Q1: 如何画一个半圆？
.half-circle {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0; /* 上边两个角是圆角 */
background-color: #00f;
}
Q2: 实际应用场景？
- 饼图的扇形
- 进度环的扇形
- 加载动画的扇形
- 菜单图标的扇形背景
3. 箭头 - 边框 + 旋转的巧妙组合
.arrow {
width: 10px;
height: 10px;
border: 1px solid #000;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
核心原理
- 创建一个小正方形（10px × 10px）
- 隐藏两条边：下边框和左边框设为透明
- 旋转 45 度：形成箭头效果
绘制过程
步骤1: 10px × 10px 的正方形，四边都有边框
步骤2: 隐藏下边框和左边框（设为 transparent）
步骤3: 只保留上边框和右边框（形成 L 形）
步骤4: 旋转 45 度
结果: 得到一个向右上方的箭头
面试扩展问题
Q1: 如何改变箭头方向？
调整 transform: rotate() 的角度：
0deg：向右90deg：向下180deg：向左270deg：向上
Q2: 如何画一个实心箭头？
使用三角形方法，或者使用伪元素。
Q3: 实际应用场景？
- 导航菜单的展开指示
- 排序图标的上下箭头
- 轮播图的左右箭头
- 返回按钮的箭头
4. 椭圆 - border-radius 的斜杠语法
.oval {
width: 100px;
height: 50px;
background-color: #ff0;
border-radius: 50px / 25px;
}
核心原理
面试官常问：border-radius: 50px / 25px 中的斜杠是什么意思？
这是 border-radius 的椭圆语法：
- 斜杠前：水平半径（x 轴）
- 斜杠后：垂直半径（y 轴）
所以 50px / 25px 表示：
- 水平半径 = 50px（宽度的一半）
- 垂直半径 = 25px（高度的一半）
完整语法
/* 四个角都相同 */
border-radius: 50px / 25px;
/* 分别设置四个角 */
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
/* 左上: 10px/5px, 右上: 20px/10px, 右下: 30px/15px, 左下: 40px/20px */
面试扩展问题
Q1: 如何画一个正圆？
.circle {
width: 100px;
height: 100px; /* 宽高相等 */
border-radius: 50%; /* 50% 表示半径是宽高的一半 */
background-color: #00f;
}
Q2: 如何画一个胶囊形状？
.capsule {
width: 100px;
height: 30px;
border-radius: 15px; /* 圆角半径 = 高度的一半 */
background-color: #00f;
}
Q3: 实际应用场景？
- 用户头像的圆形显示
- 按钮的圆角设计
- 标签的胶囊形状
- 卡片的圆角设计
总结
在前端开发中，利用纯 CSS 绘制图形是考察开发者对 CSS 理解深度的一个重要方面。本文通过几种常见的图形绘制方法，展示了如何高效运用 CSS 技巧实现所需的设计效果。
- 三角形：通过对元素的宽高、边框颜色和透明度的巧妙设置，可以轻松创建不同方向的三角形。这对于制作对话框箭头、工具提示指示器等非常实用。
- 扇形：使用
border-radius和正方形或边框的不同组合，能够创造出各种角度的扇形。适用于饼图、进度环等场景的设计需求。 - 箭头：结合边框与旋转技巧，可以生成具有指向性的箭头图标，广泛应用于导航菜单、排序图标等方面。
- 椭圆及圆形：通过
border-radius的高级用法，如斜杠语法的应用，能灵活地创建从椭圆到正圆的各种形状。这为用户头像显示、按钮设计等提供了多样化的选择。
掌握这些基本图形的绘制方法，不仅能增强你的 CSS 技能，还能在不依赖图片的情况下提升网页性能和用户体验。希望这些示例能够激发你的创造力，并帮助你在实际项目中应用这些技术。
