用纯 CSS 绘制几何图形：从三角形到箭头的魔法

wwwwW
57 阅读4分钟

用纯 CSS 绘制几何图形：从三角形到箭头的魔法

在前端开发中，我们常常需要绘制一些简单的 UI 图形，比如三角形、扇形、椭圆或箭头。很多人第一反应是“用图片”或“用 SVG”，但其实——仅用 CSS 就能实现这些效果！本文将通过一段实际代码，深入解析如何利用 border、border-radius 和 transform 等 CSS 属性，不依赖任何图片或外部资源，绘制出多种常见几何图形。

🧩 示例代码总览

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .triangle { ... }
    .sector { ... }
    .sector2 { ... }
    .arrow { ... }
    .oval { ... }
  </style>
</head>
<body>
  <div class="triangle"></div>
  <div class="sector"></div>
  <div class="sector2"></div>
  <div class="arrow"></div>
  <div class="oval"></div>
</body>
</html>

这段代码展示了五种不同的 CSS 图形技巧。下面我们逐一拆解其原理与实现逻辑。

🔺 1. 三角形（.triangle）——边框魔法

.triangle {
  width: 5px;
  height: 5px;
  border: 10px solid transparent;
  border-top-color: #f00; /* 红色 */
}

✅ 效果：

一个红色向下的小三角形（尖朝下）。

🔍 原理解析：

  • 虽然 width 和 height 设为 5px（很小），但真正起作用的是 边框。
  • 四个方向都设置了 10px solid transparent（透明边框）。
  • 只有 border-top-color 被设为红色 → 上边框变成红色，其余保持透明。
  • 浏览器在渲染时，相邻边框以 45° 斜接，于是上边框形成一个倒置的等腰三角形（尖朝下）。

💡 如果你希望三角形尖朝上，应设置 border-bottom-color；
尖朝左 → border-right-color；尖朝右 → border-left-color。

🥧 2. 扇形（.sector）——圆角裁剪

.sector {
  width: 100px;
  height: 100px;
  border-radius: 100px 0 0; /* 左上角圆角，其余直角 */
  background-color: #00f; /* 蓝色 */
}

✅ 效果：

一个四分之一圆形（90° 扇形） ，位于左上角。

🔍 原理解析：

  • border-radius: 100px 0 0 是简写，完整形式为：

    border-top-left-radius: 100px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

  • 左上角被设为 100px 圆角（等于宽高），形成四分之一圆。

  • 其他三个角保持直角 → 整体看起来像一个“蓝色披萨块”。

⚠️ 注意：border-radius 的值不能超过元素尺寸，否则会被截断。

🌀 3. 环形扇形（.sector2）——边框 + 圆角

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

✅ 效果：

一个红色的环形扇形（类似仪表盘的一段） 。

🔍 原理解析：

  • width: 0 + border: 100px solid transparent → 创建一个空心圆环的基础。
  • border-radius: 100px 将整个边框区域变成圆形（因为边框总宽 = 200px，半径 100px 刚好）。
  • 只有 border-top-color 为红色 → 圆环的顶部 90° 区域显示为红色，其余透明。
  • 最终呈现为：一个红色的圆弧段（扇环） 。

✨ 这是实现“进度环”或“仪表盘指示器”的常用技巧！

➡️ 4. 箭头（.arrow）——旋转正方形

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

✅ 效果：

一个黑色向右的箭头。

🔍 原理解析：

  1. 先画一个 10×10 的小正方形，带黑色边框。
  2. 将 底边和左边设为透明 → 只剩下上边和右边（形成一个“L”形）。
  3. 使用 transform: rotate(45deg) 将整个图形顺时针旋转 45°。
  4. 结果：L 形变成一个尖锐的箭头，指向右上方（视觉上就是向右的箭头）。

💡 改变哪两边透明，再配合旋转角度，可以生成任意方向的箭头。

🥚 5. 椭圆（.oval）——非对称圆角

.oval {
  width: 100px;
  height: 50px;
  background-color: #ff0; /* 黄色 */
  border-radius: 50px / 25px;
}

✅ 效果：

一个横向的黄色椭圆。

🔍 原理解析：

  • border-radius: 50px / 25px 表示：

    • 水平方向圆角半径：50px（= width/2）
    • 垂直方向圆角半径：25px（= height/2）

  • 当圆角半径分别等于宽高的一半时，元素就变成了完美的椭圆。

📌 通用公式：
要画椭圆 → border-radius: width/2 height/2;

🧠 总结：CSS 图形绘制的核心技巧

技巧应用场景关键属性
边框三角形下拉菜单箭头、提示气泡width:0; height:0; border
单角圆角扇形、圆角标签border-radius: X 0 0 0
边框+圆角环形进度、仪表盘border + border-radius
旋转裁剪自定义箭头transform: rotate() + 透明边框
非对称圆角椭圆、胶囊按钮border-radius: X/Y

✅ 为什么用 CSS 画图？

  • 无需图片：减少 HTTP 请求，提升加载速度
  • 完全响应式：可通过 em、%、vw 等单位自适应
  • 易于维护：颜色、大小可直接通过 CSS 变量控制
  • 支持动画：可对图形做 hover、transition 等交互

🚀 小练习建议

尝试修改上述代码，实现：

  • 向上的红色三角形
  • 180° 的半圆扇形
  • 向左的黑色箭头
  • 竖向椭圆

你会发现，CSS 不只是样式工具，更是绘图利器！

掌握这些技巧，你就能在项目中轻松实现各种轻量级图标与装饰元素，让页面更精致、性能更优。下次遇到简单图形需求时，不妨先想想：能不能用 CSS 画出来？

avatar
文章
阅读
粉丝