在前端开发中，我们常常需要展示各种图形元素。虽然可以借助 SVG 或图片来实现，但 CSS 本身其实就具备强大的图形绘制能力！今天，我就带大家用纯 CSS 实现几个常见的几何图形：三角形、扇形、箭头和椭圆，并分享背后的原理与技巧。
这些技术不仅实用，还能让你在面试或项目中脱颖而出！
目标效果
通过以下代码，我们可以生成如下图形：
- 黑色小三角形
- 蓝色四分之一圆
- 红色半圆形扇形
- 小箭头
- 黄色椭圆
核心原理：CSS 边框 + 圆角 + 变换
1. 三角形：利用 border 创建
.triangle {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #000;
}
原理：
一个宽度高度为 0 的元素，设置四个边框，其中只有顶部边框有颜色，其余透明，就会形成一个向上的黑色三角形。
这是经典“CSS 三角”技巧，广泛用于下拉菜单、对话框箭头等场景。
2. 扇形一：使用 border-radius 实现四分之一圆
.sector {
width: 100px;
height: 100px;
border-radius: 100px 0 0;
background-color: #00f;
}
原理：
border-radius: 100px 0 0 表示左上角和右上角为 100px 半径的圆弧，而左下角和右下角为 0，这样就形成了一个“左上角为圆”的矩形，即四分之一圆。
注意：这里的 border-radius 是按顺序排列的：top-left top-right bottom-right bottom-left。
3. 扇形二：使用 border 和 border-radius 组合
.sector2 {
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #f00;
border-radius: 100px;
}
原理：
这个是更高级的技巧 —— 利用 border 的视觉延伸性，结合 border-radius 实现一个“红色半圆扇形”。由于 border-radius: 100px 让整个边框变成圆形，而只保留顶部边框有颜色，所以看起来像一个向下开口的扇形。
这种方式可以轻松创建任意角度的扇形，只需调整 border-width 和 border-radius。
4. 箭头：用 border + transform 实现
.arrow {
width: 10px;
height: 10px;
border: 1px solid #000;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
原理：
先画一个正方形，然后隐藏底部和左侧边框，再旋转 45 度，就得到了一个指向右上方的小箭头。
这个方法非常灵活，可用于导航图标、状态提示等。
5. 椭圆：使用 border-radius 实现
.oval {
width: 100px;
height: 50px;
background-color: #ff0;
border-radius: 50px / 25px;
}
原理：
border-radius: 50px / 25px 表示水平方向圆角为 50px，垂直方向为 25px。由于宽高比为 2:1，因此形成一个标准的椭圆。
提示：border-radius: 50% 也能实现圆形，但对椭圆来说，需要指定两个值。
总结：为什么学这些？
| 技巧 | 优点 | 应用场景 |
|---|---|---|
| CSS 三角 | 无图片、轻量 | 下拉箭头、标签尖角 |
| 扇形 | 灵活可变 | 数据可视化、进度条 |
| 箭头 | 可控方向 | 导航按钮、流程图 |
| 椭圆 | 简单优雅 | 图标、按钮、徽章 |
结语
别再依赖图片了！掌握这些 CSS 技巧，你就能用纯代码绘制出精美的图形元素，提升页面性能与加载速度，同时展现你的前端功底。
如果你觉得这篇文章有用，欢迎点赞、收藏、转发！也欢迎留言告诉我你还想学哪些 CSS 图形技巧～
