🎨 用 CSS 画画：前端不靠 PS 的图形魔法书如果你曾在项目里：被设计稿里一个小箭头逼疯不想为了一个三角形引入

你以为 CSS 只能写样式？

不，它还能：

画三角形 🔺

画扇形 🧩

画箭头 ➡️

画椭圆 🥚

甚至——在没有任何图片的情况下，徒手画 UI 图形。

如果你曾在项目里：

被设计稿里一个小箭头逼疯
不想为了一个三角形引入一张 PNG
想在面试里秀一把 CSS 基本功

那这篇文章，就是为你准备的。

🧠 一、为什么前端要学「CSS 画图形」？

在 SVG、Canvas、Figma 盛行的今天，为什么还要学 CSS 画图形？

答案很简单：CSS 图形 = 成本最低的视觉方案。

CSS 图形的优势

✅ 0 图片请求：性能友好
✅ 可响应：跟着布局走
✅ 可主题化：改个颜色就换皮
✅ 面试高频：三角形 ≈ 必考题

很多 UI 细节：

tooltip 的小三角
下拉菜单的箭头
气泡对话框的尖角

本质上，都是 CSS 图形。

🔺 二、CSS 三角形：前端界的入门仪式

我们先从最经典的开始。

1️⃣ 核心原理：border 会「斜着切」

当一个元素 宽高为 0 时，border 会在中心点相交：

.triangle {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: red;
}

效果：

🔺 一个向下的红色三角形

2️⃣ 为什么会这样？

可以把它想象成：

四块彩色玻璃，从四个方向往中间挤

只有你留下颜色的那一边，被人看见了。

3️⃣ 三角形方向大全

/* 向上 */
border-bottom-color: red;

/* 向右 */
border-left-color: red;

/* 向下 */
border-top-color: red;

/* 向左 */
border-right-color: red;

💡 面试金句：

CSS 三角形不是画出来的，是 border「挤」出来的。

🧩 三、扇形：border + 圆角的组合技

接下来进阶一点——扇形。

方式一：圆角裁切法（最直观）

.sector {
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 100px 0 0;
}

效果：

🧩 一个 1/4 圆扇形

原理拆解

border-radius 支持 不同方向的圆角
大圆角 + 裁切 = 扇形错觉

这种方式：

✅ 简单直观
❌ 角度固定（不灵活）

方式二：border 扇形（偏底层）

.sector2 {
  width: 0;
  border: 100px solid transparent;
  border-top-color: red;
  border-radius: 100px;
}

效果：

🎯 像披萨一样的扇形

💡 本质：

三角形 + 圆角

➡️ 四、箭头：最常见，也最容易被忽略

UI 里最多的是什么？

👉 箭头。

用 border 画一个箭头

.arrow {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}

效果：

➡️ 一个干净利落的箭头

为什么这样能成？

边框 = 两条线
旋转 = 改变方向

你现在看到的：

下拉框箭头
返回按钮
右侧指示

80% 都是这个套路。

🥚 五、椭圆：border-radius 的数学美感

椭圆的秘密

.oval {
  width: 100px;
  height: 50px;
  background: yellow;
  border-radius: 50px / 25px;
}

效果：

🥚 一个标准椭圆

关键点：斜杠 `/`

border-radius: 横向半径 / 纵向半径;

这不是语法糖，
而是 CSS 内置的几何能力。

🧱 六、CSS 画图形的通用心法

学会几个图形后，你会发现：

所有 CSS 图形，都逃不出这 5 个核心

width / height
border
border-radius
transform
overflow: hidden

💡 真正厉害的不是记代码，而是理解组合方式。

🧠 七、什么时候该用 CSS 画？

✅ 适合：

UI 装饰
指示性图形
小图标

❌ 不适合：

复杂插画
不规则曲线
高精度图形

一句话总结：

CSS 图形，是前端写给浏览器的几何题。

🚀 九、最后

当你学会用 CSS 画图形，你会发现：

CSS 不再只是“调样式”
而是一门 描述几何世界的语言

下次再遇到设计稿里的小三角，
别急着切图。

👉 先问问 CSS 能不能搞定。

如果你觉得这篇文章对你有帮助，
欢迎点赞 👍 收藏 ⭐

🎨 用 CSS 画画：前端不靠 PS 的图形魔法书